![](https://i0.wp.com/japanese-web-designer-corder-hnt.com/wp-content/uploads/2021/04/cropped-HNT-BLOG-4.jpg?resize=150%2C150&ssl=1)
どのように、Adobe XDを用いて、ウェブデザインをしたらよいのでしょうか?この記事で、コーポレートサイトのKrushnamurti Foundation of Americaをお手本として、ワイヤーフレームとデザインカンプのファイル作成手順をご紹介します。
模写デザインの手順
Wire Frameファイル
![](https://i0.wp.com/japanese-web-designer-corder-hnt.com/wp-content/uploads/2020/06/c389a81c98796ac958bebb6743b49650.png?resize=569%2C1024&ssl=1)
今回模写デザインをしたKrishnamurti Foundation of Americaを、以下の3つの部分に分け、各コンテンツを挿入する場所を配置しました。
Header
サイトアイコン、メニュー、メインビジュアルのカルーセルの場所を配置
Main Contents
各コンテンツの場所を設置。
Footer
About、Mailing list form, Contact detais, Copy rightの場所を配置。
Comprehensive Design Layoutファイル
![](https://i0.wp.com/japanese-web-designer-corder-hnt.com/wp-content/uploads/2020/06/0382466171a18e7e2d589a5d58b14e32.png?resize=586%2C1024&ssl=1)
Wire Frameに配置した各場所に、画像やテキストを挿入しました。なお、デザインの統一性や簡略化のために、配色やコンテンツの内容を一部変更しました。
Header
サイトアイコン、メニュー、メインビジュアルのカルーセルの場所に、画像とテキストを挿入
Main Contents
各コンテンツの場所に、画像とテキストを挿入
Footer
About、Mailing list form, Contact details, Copy rightの場所に、画像とテキストを挿入
おまけ(コーディングの手順)
![CooperateSite-kfa](https://i0.wp.com/japanese-web-designer-corder-hnt.com/wp-content/uploads/2020/04/CooperateSite-kfa.orgFull.png?resize=364%2C1024&ssl=1)
作成したデザインカンプに従いながら、コーディングして、ウェブページを制作しました。
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のデザインをすることができます。さらに、デザインカンプに沿って、コーディングすることで、ウェブサイトを制作することができます。
ウェブサイト開設の手続き[サーバーレンタルと独自ドメイン取得】もご覧ください。