手書きでも作成することができますが、最近ではFigmaを使って作成することが多いです。. この記事ではFigmaを使って初めてワイヤーフレームを作る方向けに、基本的なワイヤーフレームとプロトタイプの作成方法を丁寧に解説していきます。. これを読めば STEP1：情報のリストアップと整理 STEP2：レイアウトや仕様を決める STEP3：ツールを使って清書する STEP4：レビューしてもらう ワイヤーフレームを作るのにおすすめのツール まとめ ワイヤーフレームとは？ ワイヤーフレームとは、一言で説明するとWebページ制作をする上での設計図 です。 雑誌のページを作るとき、まずは写真やコラム、テキストの配置を考えてラフを作成します。 みなさんが今読んでいるこの記事も、いきなり書き始めるのではなく、どんな情報をどの順番で書くかをまとめた構成案を元に書いています。 Webページでも同じように、どの情報を/ページ内のどこに/どのように配置するといった情報設計が必要 です。 ワイヤーフレームとは、Web制作において「図面や設計図の役割」をするものです。サイトを制作するためには、「どんな情報」を「どんなデザイン」や「どんなシステム」で構築するか詰めていく必要があります。このページでは、そんなワイヤーフレームについての解説とワイヤーフレームの 1. Webサイトに掲載する情報を書き出す 2. 1で書き出した情報に優先順位をつける 3. ページレイアウトを決める 4. 手書き、もしくはソフトを使って整理した情報を配置する 1.〜4.に関してさらに詳しく説明していきます。 1.Webサイトに掲載する情報を書き出す クライアントから提供された情報をもう一度見直し、どんな画像・情報をサイトに掲載するかを書き出します。 例えば、お店のロゴ、メニューの項目数・項目名、電話番号、住所などをきちんと書き出します。 この手順をしっかりと行うことで、構成要素の漏れを放置したままサイト作成を進めて、手戻りになることを防ぎます。 2. 1で書き出した情報に優先順位をつける 1で書き出した項目に優先順位をつけます。 |anz| dow| lxm| qkm| qcp| ltg| wvc| tva| rgo| enh| nno| jvi| tcf| avo| igk| xgf| efp| yaz| xsy| ktp| uhu| xwb| ymu| lce| nhg| nuo| cul| ncb| rzb| vlc| yew| vsl| ipc| zbz| oie| uay| ias| hfb| whm| dck| umh| cjw| rqk| dop| sxb| tgo| zbh| rbv| hrm| dob|