Adobe XDでできることは大きく分けて以下の3つです。
・ワイヤーフレームやデザインカンプの作成
・プロトタイプ作成
・デザインの共有やコメント
特徴的な機能は
・リピートグリッド 要素の繰り返しがドラッグひとつでできる
・シンボルの作成 アートボード間で何度でも使用できるオブジェクト
・Adobe CCとの連携 Creative Cloudライブラリとの連携(command + o)
使い方はXDを起動すると右上にチュートリアルが表示され、基本的な機能を学習することが出来ます。
画面の名称は左から
・ツールバー
・アセットパネル
・アートボード（ベースボード）
・プロパティインスペクター
ショートカット
・command + スクロールで拡大/縮小
・command + 3 でフォーカス
・command + R リピートグリッド
・command + Enter プレビュー
・space で手のひらツール
・R(Rectangle) 長方形
・E(elliptical shape) 楕円形
・Y 多角形
・P ペン
・L 線
・T テキスト
・A アートボード
学習のポイント
・ブロックを選択してコピーコンテンツの作成と画像の一括適用
・アートボード選択してスクロールを垂直方向で設定
・アセットのカラーを表示して一括差し替え、逆にアセット側からカンバスハイライトも可能
・プロトタイプタブで遷移をつないだり、ヘッダーの固定、プレビュー
・プロトタイプのドキュメントに招待からclouddocumentに保存、共有、共同編集可能（共有タブ）
Adobe XD スターターキットは以下からダウンロード可能です。
Adobe XD スターターキット基礎編＆中級編
Adobe XDことはじめStep1：ワイヤーフレームを作ってみよう！ ›
Adobe XDことはじめStep2：これは便利！デザインカンプがサクサク作れる ›
Adobe XDことはじめStep3：快適&軽快！PhotoshopとXDの最強連携 ›
実際に作成する際には共通パーツを洗い出してはじめに制作しておくことがおすすめ。
ボタン
メニューアイコン
ナビゲーション
見出し
本文
色
各種アイコン
Web業界の方はよく聞く表現かと思いますがプロジェクトマネジメントとは何でしょうか？
簡単に言ってしまうと、「プロジェクトをどのように遂行するか計画を立て、その目的を達成できるように「課題管理」「スケジュール管理」「成果物管理」を行いプロジェクト全体をコントロールする」ことになります。
また、一般的にプロジェクトを推進するメンバー・組織のことをプロジェクトマネジメントオフィス（PMO）と呼びます。
プロジェクトマネジメントが必要な理由は、プロジェクトマネジメントの手法を用いることで、プロジェクトの目標達成の確実性が上がるからです。プロジェクト体制を構築し体系的に運用することで、コミュニケーション面、スケジュール面を始め、効率的に業務を行うことが可能になります。
プロジェクトの目的を達成するためには「プロジェクトのゴール」を定義し、そのゴールに向かって適切な進行をする必要があります。
また、プロジェクト成功のためのプロセスを構築するためには、品質・コスト・納期以外にもスコープやリスクなども管理する必要があります。
そのためにはゴールを達成するための膨大な量のタスクを分解して体系化していかないと、作業が費用率になったり抜け漏れが起こったりします。そこでよく使われるのがWBSという手法です。
WBSとは、Work Breakdown Structureの略でプロジェクトのスケジュール管理に使われるツールの1つで、作業工程を分解して示したもののことです。分解された作業に担当と期限を設定し、スケジュールがわかるようにした工程図のことはガントチャートといいます。
作業工程を分解して示したものと、それをスケジュールにしたものを合わせて「WBS」と呼ぶことも多いですが、基本的な流れはWBSに基づいてガントチャートを作成することになります。
WBSはもちろんExcelでも作れますが、ガントチャートの作成が大変だったり、プロジェクト進行時に遅延などや作業追加で１つ項目に変化があった場合に修正が難しいなどデメリットが多いです。そこでクラウドベースでWBSが作成できてメンバーで共同編集も出来る便利なツールをいくつか紹介します。
PMBOK（Project Management Body of Knowledge）とは、プロジェクトマネジメントに関するノウハウや手法を体系立ててまとめたものです。1987年にアメリカの非営利団体PMIが「A Guide to the Project Management Body of Knowledge」というガイドブックで発表してから徐々に知られるようになり、今ではプロジェクトマネジメントの世界標準（事実上の標準）として世界各国に浸透しています。内容は４年に１度くらいのペースで改訂され、今の最新版は2017年に発行された第6版となっています。
ただし、PMBOKの整理された知識は有用な物ですが実際の現場でそのまま使えるものではありません。プロジェクトマネジメントを強化するための具体的手段を考える際の参考に使うというイメージが良いかもしれません。
PMBOK を作成したPMI（Project Management Institute）は、アメリカに本部があります。日本では1998年にPMI日本支部（PMIJ）が設置されており、PMBOKの普及促進やPMPという資格の認定、交流などを行っています。
プロジェクトマネージメントに関する国際資格で有名なものにPMPという資格があります。
取得することで体系的な仕事の進め方が身につくため業務の効率化が図れたり、この資格の取得によって社内外に対してプロジェクトマネジメントの専門性を証明出来るのでキャリアアップとしても活用できます。ただし、資格取得のための受験資格が厳しかったり、更新の試験やそのための条件もあるので、時間や費用といったコスト面では少しハードルがあります。
PMP®試験の受験資格としては以下があります。
・プロジェクトマネジメントの指揮・監督する立場での経験（高卒で5年以上の実務経験証明、大卒で3年以上の実務経験証明）
・35時間の公式なプロジェクトマネジメントの研修の受講（REP(Registered Education Provider)、大学、PMI支部など）
PMP® とは、PMI 本部が認定しているプロジェクトマネジメントに関する国際資格です。
PMP® 試験は、PMI が策定した知識体系である PMBOK® (Project Management Body of Knowledge) ガイド に基づいて実施され、受験者のプロジェクトマネジメントに関する経験、教育、知識を測り、プロフェッショナルとしての確認を目的として実施されます。
専門知識を有していることを証明するために、米国PMI本部が資格認定を行うものであり、法的な資格、免許ではありません。PMP® 資格は、プロジェクトマネジメントに関する資格のデファクト・スタンダードとして広く認知されており、プロジェクトマネジメント・スキルの評価基準として、IT・建設をはじめとする多くの業界から注目されています。
HTMLやCSSをはじめ、プログラミング言語をこれから始める方は
是非その語源も覚えておくと楽しく覚えられると思いますよ。
ちなみにHTMLはHyperText Markup Languageの略です。
ハイパーテキストとはハイパーリンクでインターネット上に散在するドキュメント同士を相互に参照可能にする仕組みのことです。
つまり、簡単に言うとＨＰをコーディング（書く）ための言葉って感じですね。
もう一つURL（Uniform Resource Locator）で良く見かけるHTTPは「Hyper Text Transfer Protocol」の略です。
つまり、簡単に言うとサーバーとブラウザ間でＨＰの言語を送受信する仕組みですね。
| 要素 | 略語 | 意味 |
|---|---|---|
| a | anchor | 碇（いかり）つまり舩の重りですね。リンクの出発点と到達点を指定します |
| alt | alternate | 代理つまり画像の意味を代わりに言葉で書いて検索エンジンに知らせます |
| br | line break | 改行。これはそのままですねラインブレーク |
| div | division | 区分。 divはブロック要素で、見出し、段落、リスト、フォームなどのひとつのまとまった単位という意味。一般的なブラウザでは前後に改行が入って表示される。 |
| dl | definition list | 定義リスト |
| dt | definition term | 定義の期間 |
| h | heading | 見出し。そのままですね。 |
| img | image | 画像（image）そのまま。 |
| href | hypertext reference | ハイパーテキストを参照つまり、そのテキストにハイパーリンクするという意味になります。 |
| li | list item | 一覧の項目 |
| p | paragraph | 段落 |
| rel | relation | 関係。そのファイルとどんな関係にあるかを検索エンジン等にしらせます。 |
| span | span | 範囲。spanはインライン要素で文章の一部としての範囲という意味。その前後は改行されません。 |
| src | source | 情報源（source） |
| table | table | 表。そのままですね。 |
| td | table data cell | 表のデータのセル |
| th | table header cell | 表の見出しのセル |
| tr | table row | 表の列 |
| ol | ordered list | 規則のある一覧 |
| ul | unordered list | 規則のない一覧 |
HPでは表示要素の内側に設ける余白部分のことをpadding（パディング）といいます。
英語で「詰め物」という意味ですね。
境界線からテキストなどの内部の表示領域までの距離を表し、
CSS(スタイルシート)などで任意の値に設定できます。
境界の外側の余白(他の要素との距離)のことはmargin（マージン）といいます。
英語で「余白」という意味ですね。
値を1つ指定した場合： [上下左右]のパディングを表します。
値を2つ指定した場合： [上下][左右]のパディングを表します。
値を3つ指定した場合： [上][左右][下]のパディングを表します。
値を4つ指定した場合： [上][右][下][左]のパディングを表します。
[css highlight=”4″ title=”paddingのサンプル”]
.entry-title {//ＨＴＭＬでclass指定したentry-titleに対する指定という意味です。
background: url("URL");//タイトルの背景に指定したい画像のＵＲＬを入れます。
background-position: left center;//背景画像を左寄せして上下の幅の中央に置きます。
padding:20px 10px 20px 20px;
font-weight:bold;
}
[/css]