Design WordPress Work

美容室のHP(ブログ)のデザイン構築

更新日:

Pocket

8月の頭に神戸に出向いて打ち合わせ、後に電話、LINEのやり取りしながらで新しいHP(ブログ)の立ち上げを行ってきました。

今回も友達の美容師・遊佐涼平の美容室のHP(ブログ)のデザイン構築です。

リミットは8月末までに完成させてSEOまでかかってる状態にできたら100点という形。

期限がある分ダラダラやってたら間に合わないだろうとも思いながらも、ちゃんと着手し始めたのは8月11日くらいから。

 

依頼の内容は美容室のHPっぽい雰囲気で、1カラムのHP感があるデザイン。

美容院のHPな雰囲気ってなんや。。

 

できればこんな感じと見せられた参考HPは、もはや自分には到底無理なデザインだった。

とりあえずわからんから適当にそれっぽい雰囲気を自分流で作成して行く段階からスタート。

 

自分の出来高プラ+αでお金が動くんだ、できるだけやろうじゃないか。

と自分の仕事をそっちのけで本気モードで着手開始。

 

BLEACHでいうと卍解ドラゴンボールで言えば超サイヤ人3くらい

初手からフルパワー。

 

余力は残しているといえばそうだが、その余力は何かがきっかけじゃないと出ないギリギリなところでの勝負!

いや勝負じゃないか。

話がそれちゃったが、とりあえず出来上がるまではずっとこのデザイン構築をしまくってました。

 

まず着手する前の裸の状態はこれ

デフォルトのデザインを使った状態の見た目。

今回は「テーマ」というデザイン構築できるソフト?みたいなものも購入して取り掛かりました!

 

いざそのテーマを導入してみると、逆にめちゃめちゃむずい

かなり素人でも使いやすくはなっているし、いじりやすいのはわかるんだが、CSSやhtmlを直接いじっていた自分からすると逆にややこしくなった。

とりあえずは慣れないといけない。

 

ということで同時進行で自分のブログのデザインも練習間隔で構築してたっていうところです。

 

とにかく何も考えずにできることがほとんど無いくらいだったので、壁にぶち当たったら調べる⇛壁にぶち当たったら調べるの繰り返し。

 

前回のブログデザインの方も苦労したが、リミットがあった分こっちはかなりしんどかったな。

こっちのブログはかなりシンプルに見えると思うけど、細かい部分の注文も多く数え切れないくらいの微調整を施しておる。

 

今回のデザインの修正中の一枚の写真を撮っておいたんだが、

■Before

■After

こういう文字の装飾とかもいちいちやっている。

簡単そうなんだけどこの装飾だけでも字体、文字の色、文字の影、間隔などの設定をしてくのにわけわからん英語羅列を並べて反映させるんだよ。

できる人はきっとスラスラできるんだろうけど、調べながらやる自分は倍以上時間かかる。

 

そんなこんなでようやく出来上がった。

ページはこちらより⇛Green 美容室/西宮北口 by yusa ryohei

■PC版

 

■スマホ版

Green 美容室/西宮北口 by yusa ryohei

まぁまぁ妥協した部分もあるけど、見栄えもそこそこ美容室っぽいし、何よりOKがもらえたんで一安心しました。

何なら初手ある程度作ったのをこんな感じ?って見せたらまぁまぁ歓喜しておられたんで、僕のセンスが良くてよかったです。

 

何よりこのページに行けばわかるんだが、写真が動くんだ。

スライドショーするんだ。

 

これが見た目以上に難しくて諦めかけた。

なんとか形にできてホッとしておる。

 

もう一回作れって言われてももう頭にはない。

下手したらもう作れない。。

 

SEOの部分は流石に記事を詰めていってという形なんで時間的に厳しいところでした。

俺が勝手に書いてアップするわけにも行かないんでね。

 

なので“できる限りの対策““見た目”というところで完成としました。

 

所要時間はわからないが、約1ヶ月くらい。

半分ぐらいパズドラもしてたようないもしなくはないが、我流で作ったものとしては十分かな。。

 

当初予定の9月から公開スタートとは行かなかったし、中にはまだ薄っぺらい記事少しだけ。

記事が集まらないから結構時間かかったのでとりあえず今後増やす形でHP開設完了としました。

 

完璧までは程遠いがこれから記事を詰めていって狙ったキーワードで検索1位に行けば最低ラインの100点

 

完璧とは要望以上の仕事をこなして完璧と言う。(誰かが言ってた気がする)

だからそれができてればOKなんすけどね。

 

 

次は自分の管理しているすべてのデザイン変更をやってきま〜す。

-Design, WordPress, Work

Copyright© YOuTsk , 2019 All Rights Reserved Powered by STINGER.