【珈琲サイト開設への道】③Web大枠のワイヤーフレームとデザインを書いてみよう

今までの2ステップでどういう方に対してWebを見て頂きたいのか、どういうホームページにすれば自分の目的を達成できるのかを考えていきました。

今回はボヤっとしているイメージを具体的なものにしていきたいと思います。といっても、コードを書くわけではありませんので、頭の中のイメージを書き出すというところです。

ワイヤーフレームってどうやって書くの？

まず、ワイヤーフレームとは、どこに何を配置するのかをイメージした図です。色や文字、絵などは無くて良いので、どこにどんな要素を置くのが良いかを出してみましょう。

いろんなWebサイトを見てみて、このサイトを真似してみたいというところから始めれば良いと思います。

ワイヤーフレームの作成に特別なツールは必要ありません。極端に言ってしまえば紙とペンがあれば作成できますので安心してください。

しかし、図やデザインを当てはめていくときに紙上では出来ませんので、PC上でワイヤーフレームが書けるツールがあると便利です。

自分は以下のどちらかで作成していますので、参考にしてみてください。

自分の場合はPowerPointが使い慣れていたので、PowerPointの方が良く使いますが、クライアントによって使い分けています。

大まかなデザインを作成したら、次は図やデザインを当ててみましょう。より実際のWebサイトに近づいていきますよ。

しかし、あくまでもデザインですので、作り込みすぎないようにしてくださいね。

より具体的になりましたね。

実際にコードを書いていくときは、このまま作成するのではなくフレキシブルな思考を持って作成した方がより良いサイトが出来ていきます。

（忠実に再現しようとすると、修正や調整の時に苦労するので、デザイン性と整ったコードの両立がひつようです。）

まずはワイヤーフレームを描き、Webデザインの基本的なフレームを作っていきます。そのフレームを基にしてデザインをしていきましょう。

これを基にしてコードを書いていきますので、適当にならないようにしましょう。ですが、これがすべてではないので、時間のかけすぎもよくはありません、、、

理想のホームページ作成に向けて一緒に頑張りましょう