ワイヤーフレームの作成 – Webデザイン | 障害を持つ方向け就職支援〜Salad〜

Webサイトのデザインに欠かせないワイヤーフレーム

Webデザインに関わる仕事で作ることになるかも

Webデザインに関わる仕事をしている人は「ワイヤーフレーム」という言葉を聞いたことがあると思います。

Webデザインに関わる仕事に就いた人は、これから実際に作成する機会もあるかもしれません。

ワイヤーフレームとは何か？と作り方を見ていきましょう。

参考：ワイヤーフレームとは？作り方や意味、おすすめツールも紹介 | WEB制作相談室

ワイヤーフレームとは

Webサイトのデザインにおけるワイヤーフレーム

Webサイトのデザインにおけるワイヤーフレームとは、要素の位置やサイズ感がわかるシンプルな見取り図(レイアウト見本)の事です。

この位置に「購入」のボタンが欲しいね、などという認識を製作チーム内ですり合わせデザインを固めていく過程で利用されるものです。

完成したワイヤーフレームをもとに詳細なデザインを作成していくのが一般的なので、デザイン要素の細かい作りこみはワイヤーフレーム完成以降の段階になります。

ワイヤーフレームの作り方

ワイヤーフレームはシンプルな図形とテキストが扱えるアプリケーションであれば作成が可能です。

どの程度まで詳細を作りこむかによって、自分のケースに適したツールを選ぶとより効率的に作成できます。

参考：【新人向け】Webデザイン制作の流れの紹介。https://nxpg.net/blog/tech/?p=8175 @nextpagekobeより

ワイヤーフレーム作成ツール

ワイヤーフレームの作成によく利用されるツール

ワイヤーフレームの作成によく利用されるツールをいくつか挙げると

・Google図形描画
・プレゼンテーションソフト – PowerPoint、Googleプレゼンテーション
・Adobe Photoshop
・表計算ソフト – Excel、Googleスプレッドシートなど
・Adobe XD

などがあります。

Adobe XDはデザイナーなどの特別な目的がある職種の方以外は持っていないと思うので今回は割愛します。詳細を知りたい方は下記の参考リンクをご覧ください。

参考：Adobe XD | UI/UXデザインと共同作業ツール【アドビ公式】

アプリごとの特徴と適したケース

どんなとき、どのアプリがワイヤーフレームの作成に適しているか

ワイヤーフレームの作成にあたり優先する事によって適したアプリが変わることは前項で説明しました。

どんなとき、どのアプリがよいのか判断材料にしていただくために、Gogle図形描画とPhotoshopでの作成の例を説明していきます。

Google図形描画でワイヤーフレームを作る

Google図形描画はGoogleドキュメント内のアプリで、線で囲まれるシンプルな図形とテキストの作成に適しています。

イラストなどの詳細なデザインを含まず、大きな変更・繰り返しの変更の少ないワイヤーフレームの作成に適しています。

あとからページ全体のサイズを変更したり、細かなデザイン(イラストやロゴなどの挿入やその絵柄の変更など)が必要になる場合は少し手順が煩雑になるので、他のアプリのほうがやりやすくなります。

Googleアカウントとブラウザがあれば利用できるため、デザインの知識がないメンバーを含む複数人のグループで編集する場合にも便利でしょう。

Adobe Photoshopでワイヤーフレームを作る

Photoshopは機能が豊富でさまざまな分野のデザインに利用できる画像編集ソフトです。

ライセンス(利用料)が高価で、またある程度高性能なコンピューターでないと動作が重くなり、フリーズして編集内容が失われる場合もあります。

関連記事：これからPhotoshopを学ぶ・仕事で使う人用まとめ

参考：Adobe Photoshop｜画像編集ソフト【アドビ公式】

詳細な編集のための機能を利用できるファイル形式(PSDファイル)で編集を行った場合にはPhotoshopのライセンスを持っている人にしか編集できず、ファイルサイズも大きく受け渡しに支障が出る場合もあるので複数人のチームでの編集には向かない場合もあります。

Photoshopをワイヤーフレームを作成するためだけに導入することはまずないでしょう。

ただし持っている場合にワイヤーフレーム作成に利用することはあります。

後から編集・修正がしやすいため、イラストなどの詳細なデザインを含んでいたり、大きな変更・繰り返しの変更があるときのワイヤーフレームの作成もスムーズに対応可能です。

使い慣れているExcelやWord、ペイント、手描きなどで作成してもよい

ワイヤーフレームは、作成するチームの構成メンバーがレイアウトを把握するためのWebサイトの要素の位置やサイズ感がわかるシンプルな見取り図です。

極端に言えば長方形とテキストだけでも作ることが可能です。

そのため作成する人にとって作りやすければ、表計算ソフトのMicrosoft ExcelやWord(または対応するGoogleドキュメントの機能)、Winowsアクセサリのペイント、手描きの図をスマートフォンで撮影したものを使う事も可能です。

特にデザインの専門教育や職種の経験のない人とのやりとりでは、先方が修正の際にプリントアウトした原稿に手描きで修正指示を書き加えたものを撮影・スキャンして返送してくることもあります。

多くの場合ワイヤーフレームは詳細なデザインの完成図ではありません。

ケースごとにチームでどの程度詳しい情報が必要なのか確認して、もし簡素なテキストと配置がわかればよいケースならExcelやWord、ペイント、手描きなどの使い慣れているツールで作成することができます。

参考：Google ドキュメントエディタヘルプ｜Google

仕事・働き方に悩んでいたら。『Salad』が強みを活かす就職のサポートをします

自分の強みを仕事にできる求人サイト

強みの活かし方を知るための情報サイト

新しい働き方を知りたい！

カスタマイズ就業って?

障害をお持ちの方の「こんな仕事をしたい」と企業様の「こういう仕事に協力して欲しい」を繋ぐ新しい働き方。

詳しく見る

就労移行支援事業所って?

働きたい方の「強み」を実際にサポートし、就労支援を行っていくオフィスです。あなたの街にもあるかも?

詳しく見る

今すぐ働きたい！

ノウドー求人情報画面

まずは、実際にどのような求人があるのか情報をみることからはじめましょう。※会社名は非公開です

求人を見る

次はユーザー登録！

【登録無料】会社名が公開された状態で詳細な求人内容を閲覧できます。あなたの強みを企業に提案していきましょう。

登録する

あなたの強みを活かす働き方を。

あなたの「好き」を『伸ばす・活かす』サポートをいたします。
でもそれはあくまでサポート。
「好きなことならがんばれる」というあなた自身の熱意を
求めている企業をみつけませんか。

でユーザー登録お問い合わせ・ご相談

まとめ

グループ・チームで仕事をする際の情報の伝え方

リモートワークやパソコンを利用する作業ではグループ・チームのメンバー間での情報の伝え方を工夫するとよりスムーズに仕事が進みます。

特にテレワーク・リモートワークの場合、イメージ(写真、図、イラストなど)で情報を伝える方法を工夫してより分かりやすくすることで、伝えられる情報の質と量を向上させれば時間も手間も大幅に効率化できます。

ワイヤーフレームなど情報共有の便利な方法を覚えて、仕事を合理的にストレスなく進めていけたら良いですね！

【サラダ編集部公式SNS】Twitter ・ Instagram
このブログの更新情報はTwitter(@KnowDo_salad)でご案内します。人気記事・おすすめ記事はInstagram(@knowdo12)でもご紹介しています！