どのように、Adobe XDを用いて、ウェブデザインをしたらよいのでしょうか？この記事で、コーポレートサイトのKrushnamurti Foundation of Americaをお手本として、ワイヤーフレームとデザインカンプのファイル作成手順をご紹介します。
模写デザインの手順
Wire Frameファイル
今回模写デザインをしたKrishnamurti Foundation of Americaを、以下の３つの部分に分け、各コンテンツを挿入する場所を配置しました。
Header
サイトアイコン、メニュー、メインビジュアルのカルーセルの場所を配置
Main Contents
各コンテンツの場所を設置。
Footer
About、Mailing list form, Contact detais, Copy rightの場所を配置。
Comprehensive Design Layoutファイル
Wire Frameに配置した各場所に、画像やテキストを挿入しました。なお、デザインの統一性や簡略化のために、配色やコンテンツの内容を一部変更しました。
Header
サイトアイコン、メニュー、メインビジュアルのカルーセルの場所に、画像とテキストを挿入
Main Contents
各コンテンツの場所に、画像とテキストを挿入
Footer
About、Mailing list form, Contact details, Copy rightの場所に、画像とテキストを挿入
おまけ(コーディングの手順)
作成したデザインカンプに従いながら、コーディングして、ウェブページを制作しました。
HTMLファイル
headタグ
- metaタグで、language codeとviewportの設定
- titleタグで、ページタイトルの設定
- linkタグで、css、bootstrap、fontawesomeとjQueryの読込
bodyタグ
- Bootstrapで、Global Navigation、Carousel, Grid Design Layoutやスタイルの実装
- headerタグで、サイトアイコン、ヘッダーメニュー、メインビジュアルのカルーセルを作成
- divタグで、各コンテンツ、ページスクロールを作成
- footerタグで、Mailing list formの設置, About, Contact details,とCopy rightの記述
CSSファイル
bootstrapで実装できないスタイルは、CSSファイルに書き込んで、実装しました。
color
background
height/width
margin/border/padding
img
jQueryファイル
jQueryのメソッドを使用して、ページ内スクロールを実装しました。
ページ内スクロール
scrollTop、fadeIn、fadeOutとhideのメソッドで実装しました。
広告リンク
ウェブデザインやプログラミングを始めませんか？
まとめ
AdobeXDの基本操作を習得しながら、Wire FrameとDesign Comprehensive Layoutのファイルを作成することで、Corporate siteのデザインをすることができます。さらに、デザインカンプに沿って、コーディングすることで、ウェブサイトを制作することができます。
ウェブサイト開設の手続き[サーバーレンタルと独自ドメイン取得】もご覧ください。
