ブログサイト「sketchbook」開設（現：notebook）

制作工程

それでは、さっそく記事の内容に入りますが、今回ブログサイトの制作に因んで「sketchbook」の制作過程について簡単に書き綴っていきます。大まかな流れは以下のとおりです。

制作の流れ

ブログサイト「sketchbook」は、WordPress によるオリジナルテーマ制作です。まず、上記の制作工程は、一般的な制作の流れを表す順番ではなく、初めて WordPress制作を進めていく上で、自身にとって都合の良い独自の流れとしていることです。初めて作るということになると設計をしようにも想像つかない部分が多く、手探りで問題を見つけては対応していくことで、意味を理解しながら進めるというやり方に基づいています。

まず初めに、全体の構成を考えるために仕様やコンセプトで方向性を定め、その後、紙のスケッチブックでワイヤーフレームを作成し、イメージを象り、コーディングで基盤を固めてから具体的なデザインに入りました。本来であれば、事前にデザインを決めてからコーディングに入ることが自然だと思いますが、本制作に関しては、知識や経験不足によりデザインを決めることができなかったため、デザインは作りながら考えていく方針を取らざるを得ませんでした。実際のところ、コーディングとデザインは同時進行で組み立てながら考えることが多かったです。 そのため、全体の整合を取るにあたり、その場しのぎの対応となりました。設計をしっかり考えることができなければ、それは何度もやり直しせざるを得ない結果を招きます。

SEO対策に関しては、主にプラグインの導入で対応しました。その後 CSS で見た目の問題を考え始め、レスポンシブWebデザインの構築、 jQuery による UI実装と動きのある仕組みづくりへと進み、全体が俯瞰できるようになってから配色を決めました。このように見た目の問題に関しては、WordPress の仕組み作り後に考えるという独自の流れとしています。最後はテストに入り、手動のバリデーションチェックやクロスブラウザ、コードチェックを経て、サイトを公開します。全体的に順番が前後する部分もありますが、基本的には、このような流れでブログサイト「sketchbook」は形成されています。

こだわりのポイント

• 配色（グレースケール）
• 余白（バランス）
• 文字（サイズ感）

制作にあたっては「配色」「余白」「文字」の３点を特に意識して取り組みました。

「配色」は、主に無彩色を取り入れることで、可能な限り色によるバイアスを排除し、記事の内容を際立たせることに重点を置いています。白をベースカラーとし、サブカラーの灰の使い方に細かい粒度で対応しています。テキストリンクは一般的な認知のある青色とアンダーラインをそのまま適用しました。

「余白」は、全体的なバランスを踏まえ、縦の余白の取り方にゆとりをもたせた間隔を意識しました。レスポンシブにも対応し、デバイスサイズに応じて各レイアウトが自然な距離感を維持できるように構築しています。

「文字」は、基準とする文字サイズを 16px とし、上下 6px ずつを付加した line-height の値を取りました。ジャンプ率を低くし、落ち着いた印象を与え、記事の内容に専念してもらえるように表現しています。

「sketchbook」の考え方

本サイトは、記事を書いて運用していくこと以外に、技術に触れることに主眼を置いています。ここでは WordPress のオリジナルテーマ制作をすること自体に意味があり、とにかくサイトを動かし、そこで得られる経験を大切に考えています。要するに、自主サイト制作の一環として、そのカタチがブログサイトであったというような感覚が近いです。そのため、情報提供としての役割は、ほぼ果たせないのかもしれません。

スケッチブックのような自由な使い方で、制作に携わりながら Webサイトを作り上げていくことをイメージしております。運用していく中で方向性を定めていくというような感覚です。Webデザインについて考える場所を設けることによって、ありのままを表現し、理解を深め、それを公開することで何かの役に立つならば、それは「sketchbook」として機能していることと考えます。

何かご意見やご感想等ございましたら、お気軽にコメントしてください。ブログサイト「sketchbook」をどうぞよろしくお願いします。