ヤマダライフログ

時間と場所にとらわれない生き方・働き方をコンセプトに、おすすめできるモノ・コトを発信するブログ。

【Webデザイン】Webサイト制作は家造りに例えると分かりやすい(2)

スポンサーリンク

f:id:yamadasoichiro:20170714084534j:plain

前回のワイヤーフレームの続きです。

ヤマダソウイチロウです。本日もお読み頂きありがとうございます!

Webサイト制作は家造りに例えると分かりやすい(1)まだ見ていない方は下記のリンクよりご覧ください。

トップページデザインは家本体

前回まででワイヤーフレームが終わりデザインに入るためのベースが終わりました。

次はトップページデザイン。これはサイトの顔になるのものとなり、家そのものと考えていただきたいです。

壁の色、屋根の色、ドアや窓の位置などヒアリングした内容を元にクライアントの希望とするイメージに近づけて制作していきます。

どこに部屋を配置するかによって使い勝手が変わるのと同じで、トップページのレイアウトによってサイトの使い勝手が全く違います。

ワイヤーフレームをしっかり作っておく事で無駄にクライアントに確認する手間も省けますし、デザイン案をみてイメージと違うと言われることはほとんどなくなります。

そして制作するアプリケーションは私の場合Photoshop。

昔Fireworksというアプリケーションもありましたが今では開発中止になっています。どうもマクロメディア系のアプリが自分には合っていなかったため使用はしていませんでした。

ヒアリングとワイヤーフレームをしっかり作っておく事で、この工程は以外にすんなり終わるはずです。

それぞれのお部屋がコンテンツページ

レイアウトしたそれぞれのお部屋がコンテンツを入れるページとなります。

情報がたくさんあるページは広くなり、少ない場合は小さい部屋で十分ということになります。

部屋の中にある家具がコンテンツ

家が完成したらいよいよ入居です。それぞれの部屋に家具を配置していくのですが、この部分がコンテンツとなります。

コンテンツとは文章や画像の事。リビングであればテレビやソファー、キッチンには冷蔵庫や調理器具、寝室にはベッドを配置するのと同じく用途にあった文章と画像を入れていきます。

ここでクライアントが急遽「ページを追加して欲しい!」とリクエストが入れば部屋を追加しなくてはいけません。手軽に増築できる造りになっていれば良いのですが、そのあたりを見越して作っていないと大変な作業に。。。

このあたりで経験の差が生まれますね。

電化製品でより快適に

大きなテレビモニターをおいたり、ルンバなどのロボット掃除機ンあど最新の電化製品を使用するのと同じ用途がホームページでもあります。

例えばトップページに大きな画像が何枚もスライドする機能であったり、下にスクロールしてもナビメニューだけ追従してくる機能など、あると便利な機能はたくさんあります。

これはJavaScriptやjQueryなどのWebプログラミングにあたると考えています。このようなプログラムを使用することでユーザーがより快適になりますが、高機能すぎても自己満足で終わってしまうところは電化製品と似ているのではないでしょうか。

まとめ

Webサイトは家造り例えると分かりやすいという考え方はいかがでしたでしょうか。

私の場合は相談を頂くお客様には基本この考え方で説明して、専門用語をできるだけ使わずに理解して頂きます。

そうする事で全くの初心者の方でも内容が入ってきやすく、早い段階で具体的な内容に進むことが出来ます。

視点を変えると、この段階でしっかりと説明して知識の共有を計っておかないと、作業が進むに従って温度差が生まれます。

その結果、完成間近に「思っていたのと違うので作り直して欲しい」という最悪の手戻りが起こってしまいクライアントとのトラブルに発展する可能性もあります。

そうならないためにも、お客様にも重要性を理解して頂き説明することをオススメします。