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】ドキュメントをPDF化する時は「複製を保存」で行うのが安心

IllustratorドキュメントをPDF化する時、私は以下のようなミスをよくやってしまいます。 Illustratorで作ったものを、一旦クライアントに送ったりするために別名保存でPDF化 ↓ PD …

日本語のフリーフォントをまとめて試せるサイト「ためしがき」

以前、「wordmark.it」(自分のPC内にインストールされているフォントをブラウザ上で一覧表示してくれる無料のWEBサービス)についてご紹介しましたが、今回はダウンロードしていないフォントを一覧 …

いくつ知ってる?和柄の名前と意味10選

  日ごろ何気なく目にしている和柄ですが、その名前や意味を知っている人は少ないんじゃないでしょうか。 とくに和風のデザインを作るときなんか、「あれ、あの模様の名前なんだったっけ…」ってなった …

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

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

たった数秒で人物だけを切り抜いてくれる「remove.bg」を試してみた!

少し前から気になっていた「remove.bg」、まだ試せていなかったので本当に数秒で切り抜きができるのか、検証してみましたよ〜。 まず「remove.bg」を初めて聞いたとういう方のために簡単に説明す …