このセクションで制作するデザインを完成品を見ながら概要を説明します。

このセクションで制作するiPhone8用の画面サイズのアートボードを準備します。アートボードが出来たら、ヘッダー部分の文字を入力します。

このレクチャーでは新しいアートボードの準備と文字の入力を実際にやってみました。

このレクチャーではメインビジュアルの写真を配置します。画像の配置の方法を学び、配置した画像をリサイズする方法を理解します。画像の配置はXDの最も基本的な操作のひとつです。今後も何度も使うので、正確に効率的にできるようにします。

このレクチャーでは６つの同じ大きさのナビゲーションバーを配置するためにリピートグリッドというテクニックを学びます。リピートグリッドはXDでは定番の技術です。これができないと今後の学習は難しくなります。効果的に使えるように確実に理解します。

ここでは同じ大きさの画像をタイル状に並べる野鳥図鑑の部分を作成します。このレクチャーでは、まず野鳥図鑑のタイトルと、背景のグレーの長方形を描きます。長方形を描いたあとにロックして、オブジェクトをロックする方法を学びます。

タイトルの下に同じ大きさの長方形をタイル状に並べて、写真を挿入します。長方形を並べるのは先のレクチャーで使ったリピートグリッドを使って行います。画像はファインダーからドラッグアンドドロップで配置させます。

次は記事を３本同じデザインで並べるレイアウトを行います。このレクチャーではそのうちの記事タイトルと罫線を引きます。タイトルの入力は文字列の入力だけですが、罫線は線ツールを使って描きます。

このレクチャーでは記事本体の文章を入力します。文章はテキストエリアという文字列入力の方法を使います。あらかじめエリアを決め、その中にテキストを入力します。このレクチャーではテキストエリアの使い方の学習をします。

このレクチャーでは写真画像と通常の文字列、そしてテキストエリアに入力された文章の記事が混在したデザインの練習を行います。さらに出来上がった記事をリピートグリッドを使ってさらにもう２つ、同じデザインの記事を加えて３本の記事にします。

このレクチャーで制作するのは先のレクチャーで仕上げたのと似たデザインの記事です。先のレクチャーで制作した記事をコピーして、それを編集して新しい記事にします。XDではこんなふうに似たデザインのオブジェクトをコピーペーストして編集することが多くあります。そんなときの効率的な編集方法を学びます。

このレクチャーではイラストの画像４点を配置します。配置自体は特に難しくない作業ですが、その後にアートボードの指定の位置に正確に整列させてレイアウトします。このレクチャーでは整列のテクニックと、オブジェクトをグループ化して複数のオブジェクトを効率よく整列させる技術を学びます。

フッターも同じデザインのバーが並ぶのでリピートグリッドを使って配置すれば簡単にできます。リピートグリッドの便利さを実感するレイアウトです。

このレクチャーと次のレクチャーではこのセクションで使った技術のうち重要なものをいくつか取り上げて復習します。このレクチャーでは画像の挿入とリピートグリッド、オブジェクトのグループ化とオブジェクトのロックの方法を復習します。

引き続きセクションの復習です。このレクチャーではオブジェクトの整列とオブジェクトの重なり順について解説しています。

このレクチャーでは制作中のプロトタイプについて、クライアントや開発のほかのメンバーと常に情報を共有できるシステムを作る方法を学びます。

つづいてWEBサイト制作で必須となっているWEBフォントをXDで使う方法を学びます。ここでは実際にAdobeのWEBフォントをインストールして、使用可能な状態にします。

このレクチャーではまたプロトタイプの忠実度をどの程度のレベルにするかについて開発メンバー、クライアントと確認することの重要性を説明します。

完成したiPhone8のプロトタイプモデルを検討し、制作の方法について理解します。

XDでは開発を助ける多くのUIキットが公開されています。これらのキットはそのまま制作中のプロトタイプにコピーペーストして使うことができ、これを使うことで高い品質のモデルが制作できます。

このレクチャーではこのUIキットを実際にダウンロードし、アートボードに使用します。

このレクチャーを履修するとUIキットの使い方が理解でき、自由に使えるようになります。

UIキットはWindowsでも使えますが、そのインストールには少しの技術が必要です。このレクチャーではWindowsでのUIキットの入手方法を説明します。Macユーザーはスキップ可能です。

UIキットを使ってStatus barをiPhone8の画面に配置します。UIキットはコンポーネント（シンボル）化されているので、コンポーネントを解除して使用します。ここではコンポーネント（シンボル）の用途と使い方も学びます。

前のセクションで制作していたiPhone8のラフなwireframeのヘッダー部分を細かく調整してプロトタイプとして再配置します。

メインビジュアルの画像も上の文字列とのマージンを調整して再配置します。

６つのナビゲーションバーをデザインし直し、リピートグリッドを使って再配置し、上下左右の余白を精密に設定します。

24種類の野鳥の写真をタイル状に配置する野鳥図鑑のために、写真を配置する正方形のプレースフォルダーを先に配置します。この配置もリピートグリッドを使って行います。

このレクチャーではリピートグリッドを使って配置したプレースホルダーに画像を一括して挿入する方法を学びます。リピートグリッドを使って作られたプレースフォルダーには画像をひとつずつ配置しなくても一括して配置する機能があります。このレクチャーではその方法を学びます。

配置された画像をガイドと整列パネルを使ってさらに正確に整列させます。このレクチャーでは吸着機能をもつガイドの設定方法を学びます。

多数の画像が並んだ野鳥図鑑を仕上げます。リンク用のhover画像を制作し、明朝体のWEBフォントを使ってタイトルをデザインします。

最新の目撃情報の記事を制作します。この記事もリピートグリッドを使って制作します。この部分では記事を添付の原稿からコピーしてテキストエリアに流し込む学習をします。長い文章の記事などは外部のエディターを使って書かれた文章である場合が多いので、それらを活用するための方法です。

観察会のご案内の記事は写真と文章が混在する記事ですが、前のセクションでできているので、ここでは正確にレイアウトすることで簡単に仕上げることができます。

さらにその下の観察会記録とSNSリンク、そしてフッターの部分をリファインしてこのiPhone8のメインページのプロトタイプを完成させます。

このセクションで完成するページのデザインを見て確認しておきます。最終的な目標を確認することで作業工程を俯瞰できるようになります。

このレクチャーではiPhone8のサブページのうち、コンタクトページのヘッダー部分を制作します。ヘッダーの部分はメインページと内容が同じなので、メインページのヘッダー部分をコピーペーストして使いますが、このときシンボル（コンポーネント）という機能を使います。操作は簡単ですが、シンボル（コンポーネント）の機能はしっかり理解しておきましょう。

コンタクトページのコンテンツ部分を制作します。新しくiPhone8サイズのアートボードを作り、コンポーネント化したヘッダーとフッターを挿入して制作します。

コンタクトページは閲覧者が送信する機能を持たせるため、送信フォームという形式でコーディングしますが、XDでの作業はほかのページと同じです。

このページでは特に新しい技術は使いません。いままでに学習した技術ばかりのレクチャーです。細かい数値を確認しながら丁寧に作りこみましょう。

野鳥図鑑のメジロの画像をタップして表示されるメジロのことを解説したページの制作です。このレクチャーでは新しいアートボードを準備して、ヘッダーを配置し、写真をレイアウトします。さらにその下にリピートグリッドを使って小さな写真を３枚配置します。

つづいてメジロのページの後半部を制作します。後半部分は写真はなくテキストの処理のみです。テキストはテキストエリアで配置します。別ファイルに入力してあるテキストをコピーペーストして、テキストエリアに流し込みます。そのあとフッター部分を配置してこのページは完成です。

このレクチャーでは観察会のお知らせのページを制作します。このページのデザインは順番などが違っていますが、直前のメジロのページのデザインを編集することで簡単にできる部分が多くあるので、メジロのページ全体をコンポーネント化して登録し、それを使って制作します。

このページでは特にリピートグリッドを使った効率的な編集方法を解説しています。

XDではページのデザインだけでなく、インタラクションの設定もできます。インタラクションというのはページのどこかリンクの設定されている部分をクリックすると、リンク先のページに遷移して、そのページが表示されるしくみですね。インターネットではおなじみの機能です。

このインタラクションがXDでは実際の動作の確認として行えます。これが制作過程でできるのは画期的なことで、これがXDの価値を大きく高めています。

このレクチャーではこのリンクの設定を実際に行います。これまではデザインモードでの作業でしたが、この操作はプロトタイプモードで行います。

このレクチャーではつづけてContactボタンのインタラクション以外のほかの部分のインタラクションも設定します。

このレクチャーではインタラクションについてスマートフォンで多く使われる形式のインタラクションの効果をXDで制作する技術を見てみます。

XDではこれらのマイクロインタラクションを簡単に設定できる機能があります。ここではこのうちの左右にスライドさせる動作と、そのディレイの時間、そしてバウンスの効果を設定してみてマイクロインタラクションの概要を学びます。

このレクチャーではこのセクションとその前のセクション３で学習したことを復習します。まず最初は「共有システムの設定」について復習します。共有システムはカスタマーと開発メンバーが開発中のプロトタイプモデルについて仕様を常に確認しあうことができる非常に有用なツールです。復習ではこの方法について学びます。

このレクチャーではもうひとつWEBフォントについてもそのインストール方法と使い方を解説します。

復習の続きです。このレクチャーではコンポーネント、オブジェクトの位置の調整方法、ガイドの活用について解説します。

このセクションで制作するデザインの内容を説明します。実際に完成したiPadProのプロトタイプを見てデザインを検討し、さらにインタラクションもテストします。

iPadPro用のアートボードを作り、制作を始めます。最初はメインビジュアルの写真を含むヘッダーの部分です。この部分はiPhone8のヘッダーと同じデザインになるので、オブジェクトを拡大するだけでほとんど出来てしまうので、オブジェクトの拡大縮小が今後の制作では重要な技術になります。このオブジェクトの拡大縮小の技術をXDでは「レスポンシブリサイズ」といいます。

つぎはその下のNav bar（ナビゲーションバー）を制作します。

Nav barの制作はリピートグリッドを使って行います。これまで何度も行ってきた作業なので簡単にできると思います。特に新しいテクニックは何もありません。

つぎは同じサイズの写真が20枚並ぶ「街の野鳥大図鑑」の部分です。この部分はiPhone8のページからコピーした写真をそのままの位置でリサイズして一括して制作します。レスポンシブリサイズの機能だけではオブジェクトとオブジェクトの間隔が制御できないので、何度かリサイズを繰り返して完成させます。

次の「最新の目撃情報」の記事ではグリッドレイアウトという新しい技術を学びます。記事をグリッドに分割してレイアウトする方法はページを見る側が混乱せず安心してみることができるレイアウトです。このレクチャーでは「最新の目撃情報」の記事を５段のグリッドのうちの３段を使ってレイアウトして、グリッドレイアウトの基本を学びます。

ページの制作を何種類も行っていると、同じレベルの見出しや文章はサイズやカラー、フォントなどを統一しておいた方がサイトが見やすくなります。このためXDではこれらの文字の属性をスタイルとしてアセットパネルに登録しておき、必要に応じて文字列にワンクリックで適用できる機能があります。このレクチャーではこの文字スタイルの登録の基本について説明します。

このレクチャーで制作する観察会案内の記事はiPhone8の記事のデザインとほぼ同じです。タイトルの位置が変化するだけなのでレスポンシブリサイズの機能は使わず、手動で位置を変え、文字スタイルを前の記事と統一させます。

つづいて観察会のお知らせ記事をあと２つレイアウトします。ここはリピートグリッドを使っても良いのですが、写真をドラッグアンドドロップで配置する面倒さを考えて、リピートグリッドを使わずに、既存の記事をコピーアンドペーストして作りました。

このレクチャーではiPadProのアートボード内で使われている残りの文字の属性を文字スタイルとしてアセットパネルに登録します。

文字スタイルを登録したら、同じようにしてアートボード内で使われているカラーについてもアセットパネルに登録します。

XDではカラーの情報はカラーとして、文字属性は文字スタイルとして、そしてオブジェクトについてはコンポーネントとして登録し、管理します。つまりアセットパネルにはカラー、文字スタイル、コンポーネントと３種類のものが登録されています。

次は観察会記録の記事です。このページのコンテンツとしては最後のオブジェクトになります。この記事は５段のグリッドのうちの中央の３段を使ってレイアウトします。

iPhone8の記事をコピーペーストして、アセットパネルから文字スタイルを適用して、タイトルと文章をほかの記事と統一します。

最後のSNSとフッターの部分を仕上げます。この部分ではフッターでiPadProではアコーディオンの機能を使わないで最初からすべてを展開した状態で表示するように改めます。

これでこのiPadProのメインページの制作は完了します。

このレクチャーとこの後の２つのレクチャーではXDの「レスポンシブリサイズ」の機能について解説します。

このレクチャーではこのうち、レスポンシブリサイズが児童の設定のときにどうのような拡大縮小ができるかを画像を使って説明し、併せてレスポンシブリサイズを一時的にオフにして拡大縮小した方が楽な場合もあることを示します。

このレクチャーではレスポンシブリサイズを手動にした場合の設定について説明します。レスポンシブリサイズは自動でリサイズがうまく行く場合はほとんどなく、たいていは手動でそれぞれのオブジェクトを個別に設定することが必要です。

ここではその場合の幅と高さの固定機能の使い方、余白機能の使い方を説明します。

このレクチャーでは文字のオブジェクトをレスポンシブリサイズで拡大縮小する場合の設定方法を説明します。

文字オブジェクトでは文字がポイントテキストかエリアテキストかで設定方法が異なってきます。また文字とシェイプを組み合わせたようなオブジェクトの場合はその設定がさらに複雑になります。

このセクションの最初に制作するページは、ホームページのContactのリンクボタンをクリックすると開くページです。ページを開いた方からこちらに連絡をとれるように入力と送信のしくみを持ったページです。HTMLでコーディングするには特別なページですが、XDでのデザインは他のページよりもはるかに簡単です。

メジロのページはiPhone8で制作したページとデザインは少し変わりますが、大きな変更はありません。写真と文章の記事の部分をブロックごとに再配置して、グリッドに合わせて大きさを変えるだけです。これまでに習ってきた技術の応用で十分対応できるので、楽しみながらデザインできるでしょう。

このレクチャーではメジロのページのコンテンツ部分を仕上げます。iPhone8のページからコピーしてきたコンテンツをレスポンシブリサイズの機能を使って左右のグリッドに合わせて拡大縮小します。

このページも先のレクチャーで制作したメジロのページと同じで、iPhone8のページをリサイズすることで簡単にレイアウトできます。特につまづくところはないと思うので、ご自分で考えながらやってみましょう。

このレクチャーではiPadProのプロトタイプモデルを作る最後の仕上げとして、インタラクションの設定を行います。これもiPhone8のページ制作でやったのと同じ作業ですから、復習するつもりでやってみてください。この設定が終わればiPadProのプロトタイプは完成です。

このレクチャーから前の２つのセクションで学習したテクニックの復習です。まずこのレクチャーではアセットパネルにカラーを登録する方法について説明します。

つぎはアセットに文字スタイルを登録する方法です。文字スタイルの登録はカラーの登録と方法は同じですが、文字スタイルにはカラーも含まれるのでカラーの登録と重なる部分があり、少し整理して覚える必要があります。

カラーと文字スタイルにつづいてこのレクチャーでは「コンポーネント」の登録について説明します。コンポーネントの登録もカラーや文字スタイルの場合と同じですが、コンポーネントでは写真や文字スタイルのほかにオブジェクト相互の位置関係などあらゆるものが含まれるために複雑です。

つぎはレイアウトグリッド機能の説明です。WEBページはページの幅を一定の比率で分割してレイアウトすることで、見る側が安定して見やすくなる効果があります。この技術を使ってページを分割してレイアウトするのがレイアウトグリッドという機能です。XDではページを指定したカラムやカラム間の間隔、さらにページの外枠とのマージンを任意に入力するとページが自動的にカラム分割され、さらに吸着機能が備わったグリッドが表示され、グリッドレイアウトが容易になります。

WEBヘッダーの部分はiPadProをデザインしたときと同じです。レスポンシブリサイズの機能を使って拡大します。デザインができたらこのヘッダーの部分をコンポーネント化してアセットパネルに登録します。

Nav barはWEBの画面では幅が十分にあるので、６つのバーを横に１列で配置します。計算してバーの幅を決めずに、グリッドレイアウトを使って６段のグリッドを配置し、それに合わせてバーを制作するようにします。

野鳥大図鑑は２０の正方形と２つの長方形でできています。この２２のオブジェクトすべてを均等に整列させて配置します。このレクチャーでは多数の同じサイズのオブジェクトを正確に整列される技術を学びます。

この整列には上のNav barがちょうど同じ幅で均等に配置されているので、このNav barに合わせる方法で整列させます。

最新の目撃情報の記事はそのつぎの観察会案内の記事と横に２つを並べる形でレイアウトします。これにはレイアウトグリッドを使って均等に配置するようにします。ここでは単にレイアウトグリッド通りに配置するだけでなく、さらに２つの記事をグループ化してアートボードの中央に揃える操作も行います。

この記事も上の２つの記事と同じグリッドを使ってレイアウトします。特に難しい部分はないので、自分で考えながらやってみましょう。

観察会記録につづくSNSとフッターの部分はiPadProとサイズを変えるだけなので、これもこのレクチャーで仕上げます。これでWEBサイズのメインページが完成します。

この部分は前のiPadProのContactページと全く同じレイアウトです。

このページでは左右に160pxの大きめの余白を取り、中央にiPadProの記事をそのまま置きます。

入力欄の大きさをグリッドに合わせて大きくすればコンテンツは完成します。フッターはWEBフッターをアセットパネルから配置して完成です。

次はWEBサイズのメジロのページです。この記事もiPadProと同じデザインです。幅を広くして写真を単純に拡大すれば簡単にできます。

このページのアートボードは先に制作したContactページをそのままアートボードごと複製して、コンテンツの部分を消去して作ります。

このページはグリッドでレイアウトします。左右に100pxの余白を作り、２段のカラムを置きます。そしてガターを50pxでグリッドを配置し、これに合わせて記事をiPadProからコピーして配置し、サイズを整えれば完成します。

このページはiPadProのものと少し違います。写真４枚を２行ではなく１行に４枚並べたデザインです。この部分だけを修正すれば簡単にできます。

このページのアートボードも先に制作したメジロのページのアートボードをそのまま複製し、コンテンツの部分のみを削除して作ります。こうしてアートボードを複製すれば前のアートボードのレイアウトグリッドもそのまま使えるので、このページも同じレイアウトグリッドで制作します。

このページのデザインが終わるとこれで３つのサイズのデザインがすべて終わります。最後にプロトタイプモードに切り替えて、インタラクションを設定すれば一応の完成です。

このレクチャーでは完成した３つのサイズのデザインを見直し、修正をして仕上げます。ここでは２つの修正、iPadProのフッターから不要なボタンを削除し、すべてのページに適用させます。

もうひとつの修正はiPhone8の文字スタイルのアセットへの登録です。iPadProの場合と同様にiPhone8でも文字スタイルを統一し、アセットへ登録して今後の変更がすべてのページに一括して行えるようにしておきます。

これでこの都市型野鳥観察クラブのWEBサイトのためのXDでのプロトタイピング作業が終了です。

XDは自己のファイル内にアートボードに配置された画像を保存しています。つまりオリジナルの画像がなくてもアートボードに配置されていればその画像をWEBサイト用の画像として書き出すことができます。

しかもXDではアートボードに配置された大きさで画像を書き出すので、アートボードのサイズごとに最適な大きさで画像ファイルを整理してひとつのフォルダに収めて管理することが容易になります。

このレクチャーではこの書き出しの機能について学びます。

XDではアートボードに配置した画像や文字などのオブジェクトの大きさや位置、カラーや文字スタイルなどの情報をCSSコードの書式で書き出すことができます。これにはデザインスペックの共有の機能を使います。

この機能を使えば面倒な要素のCSSプロパティ情報をひとつひとつ調べる必要はなく、自動的にCSSのプロパティとして書き出せるので、そのままCSSシートにコピーペーストで書き込めます。

このレクチャーではこのCSSコードの書き出し機能について説明します。

このレクチャーでこのコースのすべての課程は修了です。