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

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

関連記事

【Illustrator】配置した画像にフチをつける方法

今日はIllustratorで配置した画像にフチをつける方法についてご紹介します。 もちろん、クリッピングマスクのかかった画像でもフチをつけることができますよ。 なんとなくフチって「線を追加」でつけら …

【Illustrator】アートボードを移動させる方法

私は1つのサイトで複数案デザインを考えるときなどに、アードボードを複数使うのですが、その際見比べやすいようにアートボード同士の間隔を広げたいなあなんて思うことがあります。 そんな時は、アートボードツー …

Macでバラバラに表示されているアイコンをきちっと整列させる方法

フォルダ内のアイコンがぐちゃぐちゃに散らばってしまうことは、Macユーザーなら良くあるのではないでしょうか。 バラバラに表示されたままでは作業もしずらく、ストレスですよね…。 そこで今回は、アイコンを …

Webデザイン学習法その1. 独学で勉強する

Webデザインを学習するのに、まずは独学でやってみようと思う人はたくさんいると思います。 そこで今回は、Webデザインを独学で学ぶことのメリットとデメリットについて私なりにまとめてみました。 &nbs …

参考になるクオリティの高い政治家サイト4選

こんにちは、ぶちこです。 制作会社に入社して約半年、毎回さまざまな業種のデザインに携わらせてもらっていますが、今回初めて政治家の方のサイトを手がけることになりました! とは言えなかなかイメージがつかず …