大まかな流れのみだったので、もう少し掘り下げてみました。対象は小〜中規模プロジェクトです。[...]前回の「私がwebサイトのラフデザインを制作する時の流れ」では大まかな流れのみだったので、もう少し掘り下げてみました。対象は小〜中規模プロジェクトです。大規模プロジェクトの場合はここに記載した内容に当てはまらない事があると思います。ワイヤーフレームとは?簡単に言えばwebサイトの設計図です。Wikipediaただ、「ワイヤーフレームをどこまで作り込むか?」は意見が別れるところです。グレーボックスで構成のみをシンプルに作る人から、テキストまで具体的で作り込む人もいます。様々なワイヤーフレームがあるのが分かります。wireframesその違いは「ワイヤーフレームの目的」によるものだと思います。以降の内容は、私が数人、または一人で全て行うweb制作で身につけた方法です。小〜中規模サイト制作時を対象としております。サイトの5W1Hどんなサイトでもそれを作る目的があります。5W1Hを明確にし、そこから外れない様な設計をする事が大切です。検索から入って商品の詳細を見て購入、などどのページをつくるか?まずトップページ。体裁が変わるようであれば下層ページも作ります。システムが入るプロジェクトでは画面遷移図としてつくることもあります。どのようなサイト設計を行ってるか参考にします。他サイトの設計は試行錯誤の結果辿り着いた設計とも言えます。「何故そのような設計にしたか?」を考える事でワイヤーフレームをつくる時の参考になります。賃貸のサイトではトップの目立つ場所に検索メニューがあります。賃貸サイトでユーザーが一番求めてるのは賃貸検索ではないか、と考察できます。(これは誰でも分かる例ですが...)また、ユーザーは過去の体験から次のアクションを予想します。過去に賃貸サイトを利用した方なら、賃貸サイトで地図を見れば「地域から賃貸を探す」を連想します。この様にその業種で多く使われてるレイアウトを参考にする事でユーザの期待を裏切らない設計も出来ます。サイトの目的がユーザービリティよりも他社との差別化を優先するのであれば、あえて他には無い設計にする場合もあります。掲載するコンテンツサイトの目的を考えつつ、どのコンテンツを入れるか洗い出します。コンテンツの優先順位をつける洗い出したコンテンツの優先順位を付けます。順位を付けたら優先順位をもとにレイアウトして行きます。優先度が高いものはページを開いた時に目に入る場所に、また、面積の大きくするなどしてインパクトを強くします。ユーザビリティWebサイトの使い勝手のよさのこと。そのページを訪れた利用者(ユーザ)がどれだけ快適に操作できるかを意味しており、ページ内の文章やボタン・画像などの各要素のわかりやすさや大きさ・配置、操作の学習しやすさ・覚えやすさ、ページ間移動の効率のよさ、ページの読み込み時間の短さなどの観点から評価される。きたユーザーが迷ったりしないか?サイトの利用方法は簡単に伝わるか?目的の場所にたどり着けるか?などユーザーにとって使い勝手の良い設計を心掛けます。この点に関しては他者の意見もできるだけ聞くと良いです。自分の常識=世間の常識ではありません。前述と被りますが、サイトの目的によってはユーザービリティを犠牲にすることもあります。最近ではjQueryなどのJavaScriptを使用して比較的簡単に導入できるようになりました。サイトの目的上、導入した方が良さそうであれば使います。インタラクティブコンテンツを入れる場合は立体的に考えて設計をする事が必要です。場合によっては導入したパターンとそうでないパターンの2つ作るケースもあります。ワイヤーフレーム上には注釈や、脇に補足で動きを書いたりして伝わる様にしておきます。マーケティング見せ方・掲載するコンテンツの違いでコンバージョン率が大きく異なる場合もあります。予測できる範囲で考慮します。マーケティングに関してはまだまだ勉強中ですが...。以上の要素を組み合わせてワイヤーフレームをつくります。「ワイヤーフレームとは」で記載した様に、ワイヤーフレームの目的はプロジェクトや職場の方針によって変わってきます。一つの方法に固執せず柔軟に対応できる力も必要だと思います。PMサイトリニューアル手順をまとめ。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。