こんばんは。今回は、webデザインのメイキングを書こうと思います。前回ご紹介した内容は、HP作成におけるWordpressのコーディング関連における参考書の紹介でした。HP作成ができた参考書等については、前回の記事をご覧下さい。

さて話を戻しますが、肝心のwebデザインについては、前回では語ることができませんでしたので、今回はwebデザインにあたって、どのようにして作成したか、どういう風にしたかったのか･･･などをご説明できればと思います。

webデザインについて

webデザインについては、もともと頭の中で決めていたイメージがしっかりとあったので、時間を掛けること無く簡単に作り上げることができましたが、サイトを訪れる訪問者のことを考えて作っていなかったので、最終調整だけは時間が掛かってしまいました。webデザインについては、以下のことを考えておりました。

左右対称にした

元々、左右対称シンメトリーが好きだった私は、一般的なブログやHPのように、目線が左から斜め右下へ誘導できるようなレイアウト配置、Z型・N型・F型には、あまりしたくありませんでした。（目線移動や誘導方法について、効力があって強いのは認めます･･･）

また、スマートフォンを片手で扱うことを考慮し、利き手による操作方法を楽にしたかったというのもあります。SNSというweb上で社会的ネットワークが構築できる時代の中、左右どちらかの手でないと楽に操作ができないという不快を解消したかった･･･というのも含みます。

あとは、デザインのレイアウト配置が簡単だったからという理由もあります。左右対称をメインに、1つのブロックさえ完成させれば、あとは均等に配置するだけで何とか組み立てることができます。左右どちらかに偏りがある場合、左右のバランスを含めて中身を考えなければなりませんから、法則を崩して行っていたら、かなり苦戦していたと思います。

使い回す形にした

使う部品を極力少なくして、同じものを使い回していこうと思いました。デザインからコーディングを行うことを考えると、作るものがたくさん増えてしまい、作業容量が増えてしまうと思ったからです。

それに、他のページで使う際、同じ部品であれば何かトラブルが起こった際、修正に困らないようにしたかったのです。万が一、不具合が起きてしまった時に、その箇所だけを修正するだけで解決できるようにしました。

あとは、統一性を乱したくないなと思いました。左右対称を軸にしたテーマだったため、1つ1つの部品作りも統一しておけば、バランスが取れるし、手間もかからないと思いました。作業を行う上では、統一性を考えて1つの部品を作るのは大変でしたが、複製して作る際はとても楽に行えました。

クリックによる移動を少なくさせるようにした

webデザインが出来ていても、訪問者に不快な思いをさせては意味がないと思いましたので、UX（ユーザーエクスペリエンス）における誘導のしやすさや、面倒さの配慮は徹底しました。

また私の場合、タイトルのテーマ名はデザインの表示上、30文字以内でしか表示することができませんので、文字ではわからない情報を大きな絵にすることで、訪問者における無駄な時間を回避させたかったというのもあります。

あとは、サイトを作る側として、作業量を増やしたくなかったからというのもあります。クリック数が多ければ多い程、作るページ数や調整が多くなりそうだと思いました。コーディング技術が上級者レベルであれば、たくさん作れるかもしれませんね。

カラー設定について

Youtubeを行う前から使用していたテーマカラーを用いて作成しました。サイトを作る上では、デザインのセオリーを崩してしまいそうですが、私が作る”作品”であれば問題ないなと判断し、テーマカラーを背景に、白文字という逆の明度にして作成しました。

明度差をわかりやすくしたかった

テーマカラーが黒に近い紺の暗色で、ロゴが白の明色ということで、HPそのものも目立ちやすいような色設定にしました。写真や見出しなど、目立たせたい部品が引き締まって、見やすくて良いなと思います。

それと、大部分･･･背景が明度だと、見ていて疲れやすくもなるので、あえて背景を暗色にして、目への負担を軽減させております。

テーマカラー以外の色について

テーマカラーである黒に近い紺色と、ロゴの白色以外については、お気に入りのシューズの色からピックアップしております。自分の中で決まっているもの･･･軸があれば、どのような色にすれば良いか、判断できると思いましたので、あえてシューズの色を利用しております。

また、本ブログやYoutubeにおいて、注釈に必要な見出しの色･･･赤、黄、緑、青などの代表的な色の決定に悩んでおりました。テーマカラーが暗色ということもあって、なかなかテーマカラーとマッチする色が決まらず困っておりましたが、シューズの色を編集して組み合わせたところ、良い感じに出来たので良かったなと思いました。

まとめ

というわけで、いかがでしたでしょうか。今回は、前回語ることができなかった、webデザインのメイキングについて書きました。

webデザイン自体は、イメージがだいたい出来ていたので苦労はしませんでしたが、サイトへ訪問して下さるユーザーのためには作られていなかったので、最終調整だけは、かなり時間がかかってしまいました。

カラー設定も、あまり時間は掛けていないと認識しておりますが、お気に入りのシューズが無ければ、自分が欲しい色を見つけ出すことは出来ませんでした。

様々な苦労と、きっかけが折り重なった私の力作でした！前回の記事でも言った通り、まだできることはいっぱいあります。ブログやYoutubeの更新が無い暇な時期に、少しずつ改善していければと思います！

それでは！