Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
サイトの構成に迷ったら読んで欲しいお役立ち記事3選 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン 制作お役立ち

サイトの構成に迷ったら読んで欲しいお役立ち記事3選

投稿日:2018-11-30 更新日:

今回は、サイトの構成を考えるときに役に立つ、おすすめの記事を3つご紹介します!

「ワイヤーフレームって何?」という方から、「サイトの内容がうまくまとめられない」とお悩みの方まで、きっと参考にしていただける記事だと思います。

 

HP作成の初心者でもワイヤーフレームの作り方をよく知らない人へ

HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

情報をつめこみすぎて、結局主題となる内容が何なのか分からない…ということはデザイン初心者にとってよくありますよね。
この記事では、情報整理の仕方や、優先度の付け方のポイントについて紹介してくれていて、とても参考になりました!

また、ワイヤーフレームの役割から作成までの流れを分かりやすく説明してくれているので、デザイン初心者の方には、ぜひ読んで欲しいおすすめの記事です。

 

効果的なワイヤーフレーム作成に必要な3ステップ

https://cacoo.com/ja/blog/how-to-properly-prepare-for-wireframing

サイトを制作するにあたって、ベースとなる情報の収集がどれだけ大切なものなのかということを再認識させられる記事です。

「まずベースとなる重要な情報を収集し、更に詳細な分析をしてから初めてデザインに取り掛かる」という工程が重要で、それをせずに作ったワイヤーフレームは、何も効果をもたらさない意味のないものになってしまうんですよね…。

こちらの記事では、その効果的なワイヤーフレームを作成するために必要な情報の集め方をステップ別に紹介してくれています。

 

ワイヤーフレームの作り方のコツ|作成時や評価時に意識すべきこと


https://search.yahoo.co.jp/amp/s/service.plan-b.co.jp/blog/creative/8467/%3Famp%3D1%26usqp%3Dmq331AQJCAEoAVgBgAEB

こちらの記事で個人的に刺さったポイントは、「ワイヤーフレームはデザインの下書きではなく、情報設計を表現するために作成するもの」という部分です。

経験が少ないころはつい、コンテンツの魅せ方などのデザイン要素にばかり気がいってしまって、肝心なサイトを制作する目的や、その目的を達成するための情報設計がおざなりになってしまっていますよね…。

私自身、「よし!ワイヤーフレームできたぞ!」と思ってもいざ上司に構成の説明をするとなると、明確な理由がでてこず、ただそれっぽい形のものを作っていただけだったんだ…と反省した経験が何度もあります。

サイトの目的は何なのかその目的を達成できる構成になっているのか、これらをしっかり意識してワイヤーフレームは作成しなければいけないと改めて痛感させられた記事です。

 

まとめ

ワイヤーフレームって思っているよりもずっと奥の深いもので、構成全てにきちんと理由や意味のある完璧なものを作るのはとても大変な作業ですよね。

ですが、細部まで考えて作り込まれたワイヤーフレームがあれば、その後のソフトでの作業がスムーズに進み、結果的にはサイト製作を成功させるための一番の近道になります。

つい、焦りの気持ちなどからソフトでの清書に移りたくなってしまうのですが、ワイヤーフレーム作成前の情報収集からじっくり行い、構成の説明を完璧にできるワイヤーフレームを作れるようになりたいです!

-Webデザイン, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Photoshop】レイヤーマスクを複製する方法

今回は久しぶりにphotoshopのテクニックについてご紹介したいと思います。 いきなりですが、私の会社では有料サイトの画像を使用する場合はまずカンプ画像を使い、その後クライアントからOKが出たら画像 …

作業がはかどる!オススメのGoogle Chrome拡張機能5選

こんにちは、ぶちこです。 いきなりですが、みなさんはGoogle Chromeの拡張機能、使いこなしていますか? 私は今までScreen Captureくらいしか拡張機能は使っていなかったのですが、他 …

超便利!アイコンフォントを一括検索できる「GlyphSearch」のご紹介

Webサイト制作では、出番の多いアイコン。 私は以前まで画像のアイコン素材を使用していましたが、その存在を知ってからはアイコンフォントに頼りっぱなしです まずアイコンフォントについて簡単に説明すると、 …

かわいいデザインのサイトが集まったギャラリーサイト

一口に“かわいい系のサイト”と言っても、子供向けのポップな感じなのか、女性向けの柔らかい感じなのか…など、様々ですよね。 なので、WEBデザインでかわいいを表現するのはなかなか難しいなあとよく思います …

Mac起動時にアプリケーションを自動的に開くようにする方法

頻繁に開くアプリが決まっている場合、Macの起動と同時に開くように設定にしておくと便利です。 些細なことかもしれませんが、特にいつも決まったアプリを複数開いている方にとっては、手間が省けるようになるの …