ヘアスタイル ページを今作成しています
![ヘアスタイル ページを今作成していますのサムネイル画像](https://shun-official.com/wp-content/uploads/2022/10/アイキャッチ-8.jpg)
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
こんにちは。休日のお昼は何ですか?青森市フリーランス美容師BLAZE hair所属 SHUN です🐒
※SHUNの事を詳しく知りたい場合は
↑こちらより閲覧可能です。
気づけば4日もブログ更新をしてなかった…。
今気づいてびっくりしました(汗)僕自身の中では
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
なんて心に決めていたんですがちょっと今手が混んでしまっていてそちらの方に注力しているためにブログが書けてませんでした(汗)
この4日間朝から晩まで必死になってあるモノを作成しています。
『あるモノ』
なんてタイトル見ればわかりますがただいま僕は
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
を自分で作成しています
これがなかなか大変で…(汗)
もう少しで完成するのですがその完成前にどう見えるのかちょっとだけこちらのブログでご紹介します^ ^
この記事の目次
ヘアスタイル一覧の外観がこちら
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル.jpg)
実際にまずは
ヘアスタイル一覧ページ
がどんな感じになるのかお見せします^ ^
一応先に話していきますが
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
あげているヘアスタイルは
どの様に表示されるか?
をチェックするためにアップ
してるので悪しからず…
パソコンからの外観
ではまずは
パソコン表示
で見た場合にどの様に見えるのかお見せします^ ^
![パソコン表示](https://shun-official.com/wp-content/uploads/2022/10/パソコン表示.jpg)
↑パソコンでページを見た際にはこの様に表示されます^ ^
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
10行表示で
全40スタイルを
1ページで表示
する様にしています
参考にしたのは”ホットペッパービューティ“
パソコン表示にする際に
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
と悩んでいたんですがパッと頭に出てきたのが
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
みんな見慣れてる
ホットペッパービューティ
にしよう!
一瞬で出てきましたね(笑)
ホットペッパービューティのスタイルページを見てみると…
![ホットペッパービューティ](https://shun-official.com/wp-content/uploads/2022/10/ホットペッパービューティ.jpg)
↑見慣れている表示かなと思います^ ^
ちょっとオリジナルを加えるために…
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-1.jpg)
★マウスホバーで画像拡大
★マウスホバーでタイトル表示
とパソコンならではの機能も付けてあります^ ^
これは
動きが欲しいな…
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
と思って急遽入れた機能です^ ^
スマホからの外観
次に
スマホからの表示
についてご紹介します^ ^
スマホで見てみると…
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-2.jpg)
↑こんな感じでパソコンの表示とは違いタイトルとカテゴリーを取っ払って
スタイルのみ引き詰めて表示
にしています^ ^
参考にしたのは”Instagram“
参考にしたのは話さなくてもわかると思いますが
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
とここだけは作成前から考えていた型をそのまま採用にしています^ ^Instagramは…
![Instagram](https://shun-official.com/wp-content/uploads/2022/10/Instagram.jpg)
↑知っている様に画面いっぱいに全部が画像になっています。
この型を敢えて採用しています^ ^
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
使い方はわかっているはずなので
敢えてこの方式の方がスマホは
見やすいはずです
スマホ表示の場合は
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
10行表示で
全30スタイルを
1ページで表示
する様にしています
個々のヘアスタイル紹介ページがこちら
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-3.jpg)
次に肝心の
スタイル紹介ページ
についてもご紹介しておきます^ ^
パソコンからのページ表示
一部分になるのですがパソコンで表示した場合は
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-4.jpg)
↑この様に表示されます^ ^
★ヘアスタイル(最大3つ)
★メニュー内容
★髪の特徴
★骨格に合うかどうか
etc…
など結構細かめに記載できる様にしています^ ^
参考はパソコン・スマホ両方”ホットペッパービューティ“
参考にしたのはやっぱり
ホットペッパービューティ
でした。
スタイルページで一番見慣れているかと思うのでホットペッパーをそのまま参考に作っています^ ^
ホットペッパービューティで一番参考にしたのが
![オススメタイプ](https://shun-official.com/wp-content/uploads/2022/10/オススメタイプ.jpg)
↑このオススメタイプの部分です^ ^
この部分をどう作ろうかが一番苦戦した部分です(汗)
美容師の場合なら何も考えずにホットペッパーにスタイルをアップする際に
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
髪は細い
クセはちょっとある
量が多い…
これで良しっと!
って感じで管理画面では簡単に操作ができてチェックをいれればそのまま反映される感じです。
その
チェックを入れれば
そのまま反映
の部分が実はしっかりと作り込まないと
チェックを入れても
反映されない
んですよね_(┐「ε:)_
この部分の開発に1日かかりました(汗)
もはやしっかり開発してしまったので
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
勝手に反映される様に
すでになってます(笑)
スマホからのページ表示
スマホの表示も基本的にはパソコンの表示と似てる感じで作っています^ ^
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-5.jpg)
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-6.jpg)
↑パソコンと違うのが
スタイルとデータが
横並びかどうか
だけです。
実際にスマホで横並びにしてしまうと
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
画像もちっちゃくなっちゃう
これらの問題があったので横並びではなく縦並びにしています^ ^そしてInstagramと違うのがInstagramの場合って画像をクリックしても
![ヘアスタイル](https://shun-official.com/wp-content/uploads/2022/10/ヘアスタイル-7.jpg)
↑この様に投稿がただ大きくなるだけであまりデータないじゃないですか?それに
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
しっかりと読みますか?
…僕の場合は
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
Instagramって(汗)
一生懸命文章を書いてる方もいますがInstagramでは何故か読みたいってならないんですよね(汗)
なのでヘアスタイルページを作ろうって思ったんです^ ^ホームページやホットペッパーの場合ってなんか文章見ません?
それに
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
仕込み
がページに張り巡らせています
この部分は…
完成までもう少しお待ちください(汗)
Q.いつまでに公開になるの?
![知っておいてほしい事](https://shun-official.com/wp-content/uploads/2022/09/知っておいてほしい事.jpg)
実際に後どれくらいで完成し公開できる様になるのか気になっているかと思います。
![SHUN](https://shun-official.com/wp-content/uploads/2022/08/自分.png)
で完成します
…意外ともう終盤なんです(笑)
なのでブログ書いたってのもあります^ ^
後少しで完成するのでもう少しお待ちください(汗)それではそろそろまた開発に行きますのでまた近々ご報告します^ ^♪