検索結果には通常、WebページのタイトルとURL、Webページの説明文が表示されます。リッチスニペットでは、スニペットの情報に加えてレビューや画像といった情報が表示されます。リッチスニペットが表示されると検索結果上で得られる情報量が増えるため、検索ユーザーの目に留まりやすくクリック率が高くなる傾向があります。
リッチリザルト（リッチスニペット）を表示するためには構造化データを記述することが必要です。構造化データとは簡単に言うと、機械が理解できる形でモノゴトの意味を伝えることができる書き方のことで、具体的にはJSON-LDという言語を使います。もし書き方が分からなくても構造化データをデフォルトで実装している CMS のテンプレートやリッチリザルト用のプラグイン、あるいは構造化データを生成するツールを利用することもできます。
ゼロから始めるセマンティックSEO&構造化データ（スライド&動画）
【徹底解説】JSON-LDを使ったschema.orgの記述方法 （記事）
構造化データを記述することで例えば以下のようなことも可能になります。
・検索結果でのリッチリザルト
・Google アシスタントがニュースを読み上げる Speakable
・How-to や FAQ などのアクションの実行
リッチリザルト（リッチスニペット）にも使われる構造化データを検証するための新しいツールを Google は公開。
Introducing Rich Results & the Rich Results Testing Tool
名称を「リッチリザルト」に統一
構造化データを利用した検索結果の特別な表示形式の種類として、Google は複数の用語を用いていました。
リッチスニペット (rich snippets)
リッチカード (rich cards)
エンリッチ検索結果 (enriched results)
公式ドキュメントにおいては今後は、「リッチリザルト (rich results)」に名称を統一します。
リッチリザルト テスト ツールはベータ版としての公開のため、機能に制限があります。
まずサポートしている構造化データは現状では次の4タイプです。
Job posting（求人）
Recipe（レシピ）
Course（講座）
Movie（映画）
この4つ以外の構造化データがページにマークアップされていても検出しません。
また schema.org の文法エラーを検出しないなど、ほかにも制限があります。
1. Markup (JSON-LD)
2. Schema
3. Business Profile
4. WP SEO Structured Data Schema
5. Schema & Structured Data for WP & AMP
6. SCHEMA for Article
7. Schema App Structured Data
自動で出力されるものとしては以下のプラグインがあります。
Yoast SEO
All in one SEO pack
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]
オバマ氏が語る、プログラミングを学べば、あなたの未来は確かなものとなる
皆さんこんにちは。昨年のHour of Code と一緒に米国中の学生や教員がコンピューター・サイエンス教育週間をお祝いしました。
新しいスキルを学び、ゲームやアプリをプログラミングし、コンピューター科学者になるのはそれほど怖いことではないということに気づきました。
一生懸命、そして少しの数学と科学で、誰にでもなれるのです。今年のコンピューター・サイエンス教育週間には、4800万人の人々がすでに参加し、そして、さらにより多くの方が参加してくれることを我々は期待しています。購買するだけでなく、作ってみてください。
一時間を割いて生活の中にあるテクノロジーにもっと触れて下さい。
こうすることであなたの未来に必要なスキルを身につける準備が出来るのです。
そしてそれが私たちの国の将来を準備する事にも役立つのです。アメリカはいつでも職人、建造家、発明家の国です。私たちは電球から電話、iPadへそれからインターネットを世の中に生み出しました。初めてプログラミンで腕を試そうとする少年や、すでに大きな仕事のなかで一生懸命頑張っている少女に関わらず、私たちはあなた方アメリカの若者に期待しています。
我々が最先端に居続ける。皆さんありがとう、ハッピーコーディング。
オバマ氏は、これまでにもプログラミングを促す声明を出しており、今回のコメントからもプログラミング教育に並々ならぬ力を注いでいることを窺い知る事ができます。オバマ氏が言うように、プログラミングはもはや特別な能力ではありません。これからの時代、便利なアプリやサービスを利用するだけでなく、自分で作ってみるという選択肢もあってはいいのではないでしょうか？
こんにちは。
昨今、プログラミング教育は米国をはじめとして世界で注目を受けています。
米国の「Code.org」は、プログラミングを義務教育化する運動が盛んに行い、
ビルゲイツやジャックドーシー、スティーブジョブズなどが、
「プログラミングの重要性について」語る動画が少し前に広まっていたのもご存知だと思います。
また日本では、今年の６月に、プログラミングが義務教育で必修化することが発表されています。
特に近年のスマホの普及などによって、私たちの生活は急速にデジタル化が進んでおり、
それを支える、プログラミングの重要性は明らかでしょう。
プログラミング脳を身につけられる。
プログラミングを通じて、論理思考力や表現力が高まるため、
問題解決スキルが身につけられるようになるということ。
登壇者である、深津氏によれば、
”プログラミングというと、コードを書くイメージが強いが、
実は一番時間を割くのは、問題を解決するための仮説作りや、仕組みやルールなどを作る方法を考える事。
コードを書くのは、本当に最後の最後”
また、Code.orgの動画の中で、スティーブジョブズが
”プログラミングから”考え方”を学んだ” と言っている。
今、子供向けのプログラミング教育が注目されているのは
いわゆるこのプログラミング脳を身につけられるからでしょう。
2. アイディアを生み出したり、整理に使える。
まつもとゆきひろ氏によれば、
”プログラミングは翻訳作業ではなく、自身のアイディアを表現するもの”
と言っています。
言語に落とし込むことで、思考が整理することができるようになります。
また、ルールさえ作ってしまえば、コンピューターが自分の代わりに作業をしてくれるなど、
自身の力を何倍にも拡張できるのもプログラミングを学ぶメリットだと言っていました。
3. 自己実現する力が身に付く。
”お金も、大きなチームもあれば、プログラミングは学ばなかったと思う。
そういうのを持っていない人にとっては、プログラミングは最大の武器になる。”
と深津氏。
しかも、作った物は、ネットを通じて簡単に世界へと広がっていきます。
これからの時代は、個人がネットを通じて他者とどのように関わるのか、
自由にデザインできる時代になると言います。
以前と比べれば、プログラミングさえあれば自己実現の可能性もひろがっています。