3-2．アートボード、レイアウトグリッドの作成方法【ワイヤーフレーム作成】【ホームページ制作】

アカイです。

AdobeXDを使ったワイヤーフレームの作成を行ないたいのに

と初めての人はつまづいてしまいます。

 

そこでこの記事では

について解説します！

 

ワイヤーフレーム作成前の「要件定義」や「コンテンツ設計」については以下の記事で紹介していますので、お先にご覧ください。

 

https://www.kuroyukiblog.com/webdesign-101requirement-roadmap/

 

https://www.kuroyukiblog.com/webdesign-201contents-roadmap/

 

１．アートボードの作成方法

AdobeXDでは様々なサイズテンプレートが準備されています。
ここでは最適なアートボードの作成方法を解説します。

 

・「iPhone X/XS/11Pro」を選択して、アートボード作成おしまい！

AdobeXDを起動します。
いろいろなサイズが準備されていますが、「iPhone X/XS/11Pro」をクリックします。

クリックすると幅375px、高さ812pxのアートボードができます。

アートボード左上の名前を「index」に変更します。

これでアートボードの作成は完了になります。

 

２．レイアウトグリッドの設定方法

レイアウトグリッドを使用することで、グリッドに合わせて正確にオブジェクトを描画したり、配置したりすることができます。
レイアウトグリッドの設定方法を解説します。

 

・プロパティにグリッド(列情報)を入力して、作成おしまい！

画面右側のプロパティインスペクターをクリックし、「グリッド」の「レイアウト」のチェックボタンにチェックを入れます。

• 列：4
• 段間隔：24
• リンクされた左右のマージン：23

と入力します。自動的に列の幅が63か64に設定されます。

列の左側にある長方形をクリックします。

色表示がされます。不透明度を10％にします。

最後に「初期設定にする」をクリックします。

 

３．なぜ「iPhone X/XS/11Pro」のアートボードで作成するの？

なぜスマートフォンの「iPhone X/XS/11Pro」でアートボードを作成したか解説します。

 

・理由１「モバイルファースト」

モバイルファーストとは、インターネット閲覧が多い端末スマートフォンをベースにWeb制作しようという考え方です。

インターネットを閲覧する端末はモバイル、タブレット、PCと多様化しています。そのような中で、80％以上の人がモバイルデバイスを活用する時代となっています。

 

そのため、モバイルデバイスを優先的に作成することが求められています。

最適な画面設計、デザインを行い、ユーザーにとって使いやすいサイトを作ることに心がけましょう。

 

・理由２「利用ユーザ数が最も多い」

iphoneのシェア率はスマートフォン全体の4割以上を占めています。残りの6割は多種多様のAndroid端末が使われています。

https://iphone-mania.jp/news-352689/

 

４．デスクトップ版のアートボード作成方法

デスクトップ版を先に作りたい場合もあるため、デスクトップ版の作成方法を解説します。

 

・「Web 1280」を選択、グリッド情報入力しておしまい！

AdobeXDを起動し、「Web1280」をクリックします。

クリックすると幅1280px、高さ800pxのアートボードができます。

「グリッド」の「レイアウト」のチェックボタンにチェックを入れ、

• 列：12
• 段間隔：40
• リンクされた左右のマージン：60

と入力します。自動的に列の幅が59か60に設定されます。

５．まとめ：モバイルファーストでアートボードを作成しよう！