どのように、Adobe XDを用いて、ウェブデザインをしたらよいのでしょうか？この記事で、コーポレートサイトのKrushnamurti Foundation of Americaをお手本として、ワイヤーフレームとデザインカンプのファイル作成手順をご紹介します。
ファイルのダウンロード
私の作成したファイル(psd, html, css. jQuery)を無料配布しますので、ダウンロードしてください。
これらのファイルを開きながら、以下の説明をご覧ください。
模写デザインの手順
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のデザインをすることができます。さらに、デザインカンプに沿って、コーディングすることで、ウェブサイトを制作することができます。
ウェブサイト開設の手続き[サーバーレンタルと独自ドメイン取得】もご覧ください。
