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

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

関連記事

ファビコン制作で参考になるサイト

タブやお気に入りなどで、横に小さくに表示されるファビコンですが、サイズが小さい故に意外とデザインも難しいですよね。。 それでも、ウェブサイトのシンボル、そしてユーザーにウェブサイトを印象付けるための重 …

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

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

デザイナー必見!使える写真素材サイト

前回に引き続き、素材サイトをご紹介したいと思います。今回は写真編です! いつも素材探しに苦労している私が見つけた、オススメのフリー素材サイトをいくつかピックアップしていきますね〜!   写真 …

グラデーションを作る時に役立つサイト5選

ギャラリーサイトを見ていると、グラデーションを使ったデザインをよく見かけますよね。 中でも、色の変化の仕方が綺麗なサイトだとつい見とれてしまいます。 私も綺麗なグラデーションを取り入れたデザインを作り …

文字タッチツールを使えば、面倒な文字組みが簡単にできる!

   イラストレーターで簡単に文字の大きさや角度を変えたい! …そんなときに便利なのが、文字タッチツールです! この文字タッチツールを使えば、文字をアウトライン化せずに、大きさ・色・回転・カーニング・ …