ジャンクワードの森

[サイトリニューアル]導線の見直し その1

当サイトではアフィリエイト広告を利用しています。

サイトリニューアルにあってまず手を付けたのは、行き当たりばったりで作ったしまったサイトの「導線の見直し」です。
導線の見直し


このエントリーをはてなブックマークに追加

その為にまず、自分のブログにとって必要だと思う要素を紙に書き出し、導線が上手くいっていると感じるサイトを見て足りない要素を追加していきました。

その時の名残(笑

手書きで整理

書き出した要素を元に「トップページ」「個別ページ」「アーカイブページ」の3パターンで必要な要素を整理し、大まかな流れを掴みました。

その後は「ヘッダー」「サイドバー(2つ)」「フッター」「ボディ」といったパーツに分けてどこに何を配置するかを決定していきます。

ここで迷ったのは、『サイドバーを共通化するか、それともページによって変化させるか』という点ですが、今回のリニューアルは導線をしっかりとすることが重要な要素なので、それぞれのページで最適なサイドバーがでるように変化させることにしました。

また、サイドバーは要素を詰め込みすぎるといたずらに長くなってしまうので、共通で見せたい要素のいくつかをフッターに入れることにします(フッターの情報が多いサイトも増えてますし)。

ここまでの整理は全部手書き

メモの写真でもわかると思いますが、導線の見直しの所はすべて手書きで情報を整理しました。

情報の整理はパワポとかイラレ、マインドマップなどのデジタルでも行いますが、整理するまでの助走期間というか準備が何気に面倒なので、思いついたらすぐ書ける手書きはやっぱり良いです。

メモは後で見直したとき、何処を悩んだかよくわかるし。

ただし、、、ここから先のデザインは手書きするのは、ワイヤーフレームと全体の幅と各カラムの幅の数値情報くらいで、その後は全部フォトショップの出番になります。

ということで、導線の見直し行いましたが、作っている途中で色々気がつくこともあるので、完璧に詰めることはしないで90%程度の完成度にしておき、サイトのデザインに移っていきます。

>[サイトリニューアル]関連記事

[サイトリニューアル]導線の見直し その1
[サイトリニューアル]導線の見直し その2
[サイトリニューアル]導線の見直し その3

[サイトリニューアル]デザインの見直し その1
[サイトリニューアル]デザインの見直し その2
[サイトリニューアル]デザインの見直し その3
[サイトリニューアル]デザインの見直し その4
[サイトリニューアル]デザインの見直し その5
[サイトリニューアル]デザインの見直し その6
[サイトリニューアル]デザインの見直し その7
[サイトリニューアル]デザインの見直し その8

[サイトリニューアル]コーディング その1
[サイトリニューアル]コーディング その2
[サイトリニューアル]コーディング その3
[サイトリニューアル]コーディング その4
[サイトリニューアル]コーディング その5

Sponsored Links

同じカテゴリの最新記事

運営者情報など

運営サポート

35-45 WOMAN

35-45WOMAN(サンゴーヨンゴーウーマン)は、「カッコいいけど身近」な女性向けWEBマガジン。

デザインとかコーディングとか、WordPressの構築とか裏側の部分を一通りやらせていただいています。

ブログ更新のアイテムとかスキルとか