3-3.AdobeXDでヘッダーとフッターを作成しよう!【ワイヤーフレーム作成】【ホームページ制作】

WEBサイト作成まとめ

アカイです。

 

ワイヤーフレームを作成するのが初めての人にとって

・まずどこから作成し始めればいいのかわからない

と困ったことはありませんでしょうか?

 

答えは単純で、ヘッダーとフッターから作成し始めると良いです。

なぜなら、コンテンツ部分(ホームページの中身)より簡単に作成ができるためです。

 

この記事では

・Adobe XDを利用した、簡単なヘッダー・フッター作成方法

について解説します!

 

以下のようなヘッダー・フッターの完成を目指します。

 

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

 

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

 

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

 

1.ヘッダーの作成方法

ここではスマホ版のヘッダーメニュー作成方法を解説します。

 

・スマホ版のアートボードを準備する

アートボードの作成方法は以下記事にまとめていますのでご参考ください。

3-2.アートボード、レイアウトグリッドの作成方法【ワイヤーフレーム作成】【ホームページ制作】
ホームページのワイヤーフレーム作成。ワイヤーフレームを作成する上での手順がわからず、こずっている方がいらっしゃるかと思います。 この記事ではAdobeXDのアートボード作成方法やコツについて解説します!

このようなアートボードを準備します。

・長方形を作成する

長方形ツールを選択します。

アートボードの左上からドラッグして、長方形を描画します。

選択ツールを選択します

Hに「90」と入力し、サイズ変更します。

塗りを選択し「#F4F4F4」と入力し、長方形の色を変更します。

境界線をオフにします。

・テキストを入力する

テキストツールを選択し、アートボード上でクリックします。

ロゴ名を入力します。

フォントを「源の角ゴシックJP」、フォントサイズ「24」でフォント変更します。

選択ツールを選択し、テキストを1列目の左端に合わせます。

 

・アイコンを作成する

長方形ツールを選択し、シフトキーを押しながらドラッグします。

すると正方形が描画できます。

正方形の塗りの色を「#DCDCDC」、境界線を「なし」に設定します。

テキストで「ACCESS」と入力し、正方形に重ねます。

同様に「MENU」も作成します。

 

2.フッターの方法

ここではスマホ版のフッター作成方法を解説します。

 

・フッターメニューを作成する

長方形ツールを選択し、以下の情報に設定変更します。

・サイズH:480

・塗り:#F4F4F4

・境界線:なし

 

テキストツールを選択し、以下2つのテキストを作成します。

・内容:MENU

 *フォント:源の角ゴシックJP

 *フォントサイズ:24

・内容:HOME

 *フォント:源の角ゴシックJP

 *フォントサイズ:20

HOMEを選択し、リピートグリッドボタンを押します。

下端のハンドルを下方向にドラッグし、HOMEが8つ分繰り返されるように調整します。

HOMEとHOMEの間をドラッグし、間隔を「8」にします。

メニュー内容を書き換えます。

 

・コピーライトを作成する

テキストツールを選択し、以下のテキストを作成します。

・内容:©️2021 Aoi bone setting

 *フォント:源の角ゴシックJP

 *フォントサイズ:24

 

長方形ツールを選択し、以下の長方形を2個作成します。

・内容:電話番号、お問い合わせ

 *サイズW:214

 *サイズH:50

 *塗り:#DCDCDC

 *境界線:なし

 

テキストで「電話番号」「お問い合わせ」を入力し、各長方形に重ねます。

 

3.PC用のヘッダー・フッター作成方法

転職継続

PC版のヘッダー、フッター作成方法については別記事でまとめてますので、こちらをご覧ください。

3-4.AdobeXDでPC版のヘッダーとフッターを作成しよう!【ワイヤーフレーム作成】【ホームページ制作】
現在記事作成中です。完成まで少々お待ちください。

 

4.まとめ:長方形とテキスト入力でヘッダーとフッターは作成可能!

アカイ
アカイ
次回は動きのあるアイコン「ハンバーガーメニュー」の作成方法について解説するよ! 

コメント

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