クリエイターの教科書

Excel, ChatGPT, Stable Diffusion, Visual Studioなどの教科書

【エクセル】ウェブ制作用のワイヤーフレームを簡単に作るには?ダウンロード

エクセルでウェブサイトのワイヤーフレームを作る手順を紹介。ワイヤーフレームとは、ウェブサイトのレイアウトなどについてざっくりとイメージを共有するためのものです。エクセルを使えば、結構簡単につくることができます。

エクセルでウェブサイトのワイヤーフレームを作る

ワイヤーフレームやデザインカンプは、ウェブサイトを作る過程でサイトのイメージをクライアントとデザイナーやウェブ制作会社とで共有するために作られます。

 

一般的にはワイヤーフレームは、ページの中にどのような構成要素が入るかを図示したものです。

 

デザインカンプは、ウェブサイトのビジュアルの方向性がはっきり共有できるものとなります。この段階では、ダミー画像が張られたり、カラーリングがほどこされた感じになります。

 

 

ワイヤーフレーム

ワイヤーフレームは構成要素やそのレイアウトを簡単に図示したものです。

 

セルを方眼紙として作る場合は、グリッド幅を狭めます。まず全体を選び、「列の幅」を選びます。

 

幅は3など。お好みで。

 

これで方眼紙が出来上がりました。

 

メニューは文字を直接入れます。

メインビジュアルの場所は、セルを選択して色を塗り替えます。

 

写真やビジュアルの場所だけセルを塗り替え、文字が入る場所には「〇〇〇」とセルに入れていきます。

 

ざっくりはしていますが、ワイヤーフレームの段階では大まかなメニュー構成、写真や文字の配置やレイアウトがみえればよしとしましょう。

 

位置合わせのためにセルの結合とかやると面倒です。

 

それをするぐらいなら「挿入>図」から記号やテキストボックスを入れるほうが楽だと思います。

 

ダウンロード

上記のサンプル用エクセルファイルは、以下より入手できます。

excel-wireframe.xlsx

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

プライバシーポリシー |〇利用規約 |〇問い合わせ