IT知識ゼロ&ワードプレス未経験の私がサイト制作に挑戦します(第3話)

こんにちは。ninoyaカスタマーサポートの亀田です。IT知識ゼロ&ワードプレス未経験制作記ですが、サイト制作の軸となるイメージは決まりました。

さっそく、本格的なサイトの設計に入っていきます。前章までの「作りたいサイトのイメージ作り」という作業は、日々の生活の中で何となく思い浮かんだ経験はあるのではないでしょうか。もちろん、サイト制作に限らず、こうだったらいいのにとか日々考えますよね。私の場合は、寝て起きたら10キロ痩せていたらいいのにとかそういうイメージです!(実は…亀田、6月からの約2ヶ月で4キロ痩せました!ninoyaTVで顔のサイズの大きさチェックして見てください笑)

話が逸れてしまいましたが、今回は実際に私のサイトのイメージを具体化していき、無料カウンセリングでワイヤーフレームを作るという作業になります。

実際にNew Standard Ver3(以下、NS3で弊社に制作依頼を検討される方に向けて無料カウンセリングもご用意しております。ものすごく至れり尽せりです!

ワイヤーフレーム作りに挑戦

そもそも「ワイヤーフレームとは?」と、ぽかんとしている方。私と同じ反応ありがとうございます!まさに、社長に「ワイヤーフレームを作ろうか」と声をかけて頂いた際に同じ反応をしていたと思われます。IT知識が豊富な方は、こんな事も知らないで制作がスタートしたのか?!と、どうか温かい目で見て頂けると嬉しいです。

IT知識ゼロの私でも理解が出来るように、社長がサイトのイメージ図を描いてくださいました。

私のような方はぜひ、この画像と共に今回も制作記をご覧くださいね!

サイト制作はレストランのコース料理と同じ

わかりやすく、例えを出させて頂きますと、まずサイト制作自体をレストランのコース料理だと思ってください。レストランの席に座ると、あなたはウェイターから「本日のコース料理は、前菜からメイン、デザートまで全てお選び頂きます」と説明を受けます。お店自体は前回のサイトイメージを考えた際に、中華なのか、フレンチなのか、和食なのかは決まっています。

入店してコース料理を選んでいく工程こそが、ワイヤーフレーム作りになります。

前菜からメインまで何を選ぶのか、サイト制作もイメージが決まったら何を載せるのかを、選んで決めていくことが大切です。


実際にざっくりとサイトイメージに合わせて、項目を書き出してみました。サイトのイメージはあるのに、実際に載せる内容については、うまく言語化出来ずに、日々頭を悩ませました。コース料理の最中でしたら、こんなにゆっくり悩んでなんかいられませんが、前菜からメイン、デザートまでじっくりと、イメージを膨らませながら考えました。

このワイヤフレーム作りは、きちんと食べたいもの(サイトのイメージ)が出来ていれば、無料カウンセリングで一緒に考えてもらえるので、自分のだいたいのイメージでも問題ありません。とにかく、イメージを書き出してみるという作業が大切です。

イメージするサイトとの比較が近道

ワイヤーフレーム作りに、一番効果的だったのは、自分が参考にしているサイトのメニューを書き出して比較することでした。(すべてなぐり書きで汚い字ですみません)

このなぐり書きから、最終的にはマインドマップにして、まとめあげました。そこまでやる必要はないと思いますが、自分のイメージの連鎖がしやすい方法を知っていると便利ではあります。

今回はかなり時間をかけて苦労をして、ワイヤーフレームを作りましたが、実際にサイトに上に載せるとかなり違和感を覚え、この後、3度も修正を行いました。私のような失敗をしないように、最後にワイヤーフレーム制作について、ポイントを3つあげます。

  1. 納品後でも手元で簡単に、修正可能
  2. サイトに載せて実際に見てみる
  3. 伝えたいイメージと合っているか確認

特に最後の「伝えたいイメージと合っているか確認」はすごく重要です。

私のサイトはシンプルを謳っているサイトなのに、ワイヤーフレームの項目が多すぎて、サイトイメージと真逆のイメージを持たれることを制作の終盤に気づき、修正致しました。この経験から、上記のポイント3つを押さえてワイヤーフレームを作りをされることを強くオススメします!

次回はTOP画面の写真、カラーのイメージの製作記です。