Webデザインについて考えるキッカケとしていくブログサイト。これは、基本的には自分自身の考察の為に設けたWebサイトという事になります。前作に引き続き、沢山の書籍やネットの情報を参考として制作に至りました。まず、この場をお借りしてお礼申し上げます。

さて、さっそく記事の内容に入りますが、今回ブログサイトの制作に因んで「sketchbook」の制作過程について触れてみようと思います。大まかな流れは以下の通りです。

1. コンセプト
2. ワイヤーフレーム（スケッチブック）
3. コーディング（WordPress）
4. カスタマイズ（SEO）
5. デザイン設計（CSS）
6. レスポンシブWebデザイン
7. UIデザイン（jQuery）
8. 配色
9. テスティング（バリデーション／クロスブラウザ／コードチェック）
10. ローンチ

制作の流れ

ブログサイト「sketchbook」はWordPressによるWeb制作です。簡単に流れを説明していきます。

まず初めに仕様やコンセプトを決めて方向性を定め、その後スケッチブックでイメージを象り、コーディングで骨組みを固めてから具体的なデザイン設計に入りました。細かいデザインについては作りながら考えた方が、今回に関しては効率が良いと判断した事に拠ります。実際には、コーディングとデザインは同時進行で組み立てながら考える事が多かったです。
カスタマイズとしては主にSEO対策としてプラグインの導入を行っております。その後はレスポンシブWebデザインやjQueryによるUIデザインと動きのあるデザイン対策へと進み、全体が俯瞰できる様になってから配色決めに至りました。
最後はテスティングの工程に入り、バリデーションやクロスブラウザなどを経て、ローンチという流れになります。全体的に順番は前後する所がありますが、基本的にはこの様な流れでブログサイト「sketchbook」の誕生となります。

拘りのポイント

• 色
• 余白
• 文字サイズ

制作にあたっては、色と余白と文字サイズに特に意識して取り組みました。
色はできる限り無彩色を取り入れ、色によるバイアスを排除し、記事を際立たせる為の配色としております。その為、白をベースカラーとしたサブカラーの灰の使い方に特に力を入れております。テキストリンクは文脈と構造で色の使い方を変えております。構造はデザイン重視として主に無彩色を採用し、文脈においては一般的な認知のある青色のアンダーラインを適用しております。
余白と文字サイズは全体的なバランスを考えて、デバイスサイズに応じたゆとりのある感覚を意識しました。基準の文字サイズは16pxに上下6pxずつを付加したline-heightの値を取っております。
今後、記事を書いていく内に変化していくかもしれませんが、制作時点ではこの様に考えております。

「sketchbook」の考え方

スケッチブックの様な自由な使い方で、書きながらWebサイトを作り上げていく事をイメージしております。書き続ける事により方向性を定めていくという方が近いかもしれません。Webデザインについて考える場所を設ける事によって、理解を深め、それを公開する事で何かの役に立てば「sketchbook」として機能している事と考えます。
どうぞ、何かご意見ご指摘等ございましたら、お気軽にコメントください。今後ともブログサイト「sketchbook」をよろしくお願いします。