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

WEBサイト作成まとめ

アカイです。

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

・どのひな型(アートボード)を選べばいいかわからない
・アートボードを作った後に設定しなきゃいけない作業がわからない

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

 

そこでこの記事では

・アートボードの選び方、作成方法
・アートボードの最初にすべき設定方法(レイアウトグリッドの設定)

について解説します!

 

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

 

1-1.要件まとめのロードマップ【要件まとめ】【ホームページ制作】
ホームページ制作でトラブルの根本原因になりやすい箇所が要件まとめ(要件定義)。揉めないためにも、必要な作業、ユーザーとのすり合わせ方法を記事にしましたので紹介します。

 

2-1.コンテンツ設計のロードマップ【サイトマップ・カラースキーム】【ホームページ制作】
ホームページ制作でユーザとの本格的な設計議論開始となるコンテンツ設計。(サイトマップ作成、カラースキーム作成)。揉めないためにも、必要な作業、ユーザーとのすり合わせ方法を記事にしましたので紹介します。

 

1.アートボードの作成方法

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

 

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

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

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

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

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

 

2.レイアウトグリッドの設定方法

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

 

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

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

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

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

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

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

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

 

3.なぜ「iPhone X/XS/11Pro」のアートボードで作成するの?

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

 

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

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

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

 

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

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

 

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

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

iPhone利用率は41.0%、MVNO+サブブランド利用率は初の下落〜MMD研究所 - iPhone Mania
MMD研究所は3月9日、「2021年3月 通信サービスの利用動向調査」の結果を発表しました。メインでスマートフォンを利用する割合は86.9%でした。iPhoneの利用率は41.0%で、iPhoneシリーズで利用者が最も多かったのはiPhone8/8 Plusでした。

 

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

転職継続

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

 

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

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

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

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

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

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

5.まとめ:モバイルファーストでアートボードを作成しよう!

アカイ
アカイ
次回はヘッダーとフッターの作成方法について解説するよ! 

コメント

タイトルとURLをコピーしました