1840

1840

• 1.
  クリエイティブコーチ Webクリエイター 夏本健司 第3回目 ポートフォリオ公開後のマーケティング法 フリーランサーになるための ポートフォリオサイト制作講座 3回シリーズ ※記載しているソフトウェアやサービス、コーディング技術等は2015年2月24⽇現在のものであり、以降、仕様変更により名称や画⾯位置が変更されている場合があります。
• 2.
  東京藝術大学美術学部卒。 1995年にウェブデザイナーと しての職歴をスタートさせ、 以来20年、ディレクター、プ ロデューサー、マーケッター、 ライター、データサイエン ティスト、Webマスターなど さまざまな職種で業界に携 わってきた。 夏本健司 クリエティブコーチ Webクリエイター ウェブサイト：na2ken.com 自 己 紹介
• 3.
  3 この授業をシリーズで受けるメリット 制作に必要なこと・考えるべきこと PRのコツ 公開時のツール最低限の設定 １ ２ ３ ポートフォリオサイトの が分かる
• 4.
  4 今⽇の授業について - ポートフォリオサイトのおさらい ２．必要なコンテンツ １．役割 ３．意図を明確にする ５．実装機能 ４．UI（ユーザーインターフェイス）
• 5.
  5 今⽇の授業について - ポートフォリオサイトのPR方法 ポートフォリオサイトのPR法 転職活動に効果的に使う場合 フリーランスのブランディングツールとして効果的 に使う場合 「きっかけ」の作り方 ※記載しているソフトウェアやサービス、コーディング技術等は2015年2月24⽇現在のものであり、以降、仕様変更により名称や画⾯位置が変更されている場合があります。
• 6.
  6 今⽇の授業について - Googleウェブマスターツールの設定 Googleウェブマスターツールとは ダッシュボード Googleウェブマスターツールでできること・わかること 管理画⾯ 準備の手順 サイトを公開したらGoogleウェブマスターツールで⾏う ４つのこと ※記載しているソフトウェアやサービス、コーディング技術等は2015年2月24⽇現在のものであり、以降、仕様変更により名称や画⾯位置が変更されている場合があります。
• 7.
  7 今⽇の授業について - Googleアナリティクスの設定 Googleアナリティクスとは レポート画⾯ アナリティクス設定画⾯ 管理画⾯ホーム 準備 Googleアナリティクスのアカウントを作成したら ⾏うべき３つのこと ※記載しているソフトウェアやサービス、コーディング技術等は2015年2月24⽇現在のものであり、以降、仕様変更により名称や画⾯位置が変更されている場合があります。
• 8.
  ポートフォリオサイトのおさらい
• 9.
  9 ここから学ぶこと - ポートフォリオサイトのおさらい - Googleウェブマスターツールの設定 -ポートフォリオサイトのPR法 - Googleアナリティクスの設定
• 10.
  質問： ポートフォリオサイト を持っていますか？ １．持っている ２．これから作る ３．持っていない
• 11.
  11 役割 ただ漠然と作るのではなく、考え方を文字にする ポートフォリオサイトは、あなた自身の ”ショールームʻｓショールーム“。 どのように使うかをよく考えて。 実績が個々のショールームだとしたら、それをまとめているポート フォリオサイトは、ショールームを集めたショールーム、つまり 「ショールームʻSショールーム」という考え方ができる。
• 12.
  12 必要なコンテンツ 沢山載せればいいというものではない。 どんな目的のポートフォリ オサイトでも、それぞれの コンテンツをただ説明する だけでなく、「あなたを パートナーとして採用する とどんなメリットがるの か？」が明確に分かるよう にしなければならない。ま た、スマホやタブレットで アクセスした時も観やすく 配慮しておく必要がある。 多くのポートフォリオサイトを観てきた結果、ポートフォリオサ イトに必要なコンテンツは５つに集約できることが分かった。そ して最小限で載せることが重要であることが分かった。 プロフィール ポートフォリオ スキルセット １ ２ ３ ストーリー 問い合わせ方法 ４ ５ ２００字程度で簡潔に。 ６〜１２程度。 できるだけ多く。 これまでの道のりを物語 のように書く。 問い合わせフォーム SNSリンク設置。
• 13.
  13 １．意図を明確にする ただ漠然と作るのではなく、目的や目標を文字にする コンセプト 目的 自分が一番大事にしていることは何か？ 何のために作るか？どんな機能を想定しているか？ 目標 狙い 何を、何時までに、という具体的な数字 作ることによって、誰に何をもらしたいか？
• 14.
  14 １．意図を明確にする ただ作るのではなく、目的や目標を文字にする コンセプト 目的 na2izm／売れるデザインがよいデザイン ブランドサイトとして機能させる 目標 狙い １０人以上真似て作成してくれる人が出ること ⾒本になるようにさまざまなフックを⼊れる 例 夏本の場合
• 15.
  15 １．意図を明確にする 意図を明確にするとデザインが変わってくる
• 16.
  16 UI（ユーザーインターフェイス） グローバルナビゲーションとスクロール 一般的になってきたドロワーメニューを 使い、操作を想起しやすくする。 アイコンを使って１つ１つのメニュー項 目が目に留まるようにしている。 Classie.jpを使い、軽く、軽快にジャンプ するよう演出をしている。 PCでアクセスした場合は、 cbpAnimatedHeader.jsを使いスクロール するとメニューが小さくなる演出をして いる。
• 17.
  17 UI（ユーザーインターフェイス） モーダル画⾯ タップをすると全画⾯でモーダル画⾯を 表示する（Bootstrapの機能）。 反応する画⾯は、アルファチャンネル値 で半透明にして下の画像が透けて⾒える ことで操作感を演出している。
• 18.
  18 UI（ユーザーインターフェイス） 戻るボタン トップに戻るボタンを常時表示してトッ プ（元の地点）に戻りやすくしている。 Classie.jpを使い、軽く、軽快にジャンプ するよう演出をしている。
• 19.
  19 UI（ユーザーインターフェイス） SNSリンク 各種SNSへのリンクを貼る意味は、問い 合わせ以外にもレスポンスの窓口を広げ るため。 良くも悪くも、各種SNSをやっている証 になる。
• 20.
  20 実装機能 機能実装は知識と技術があることの⾒せ所。 - ポートフォリオ詳細表示のモーダル画⾯ - メール送信php -Bootstrap3.0.2 - Font-Awesome4.2.0 最新の機能、他のサイトでよく⾒かける機能を網羅し ておくと、実装できることの証になると同時に話のネ タにもなる。 - アニメートヘッダーの実装 - ⽇本語Webフォント“notoSansJP”
• 21.
  21 実装機能：アニメートヘッダ 最近よく⾒かけるようになった“おもてなし機能“ bpAnimatedHeader.jsを使う。スクロールするとナビゲーションの幅が小さくな り、ユーザに対して読みやすく、画⾯を広げているように印象付けられる。
• 22.
  22 実装機能：モーダル画⾯ 拡大表示の定番機能 Bootstrapのclass=“modal”を使っている。主画⾯ではサムネールの画像のみで ビジュアル訴求、モーダル画⾯で詳細情報が⾒える２段階方式にしている。 （サムネールだけでもたのしめる⾒ごたえがあるように）
• 23.
  23 実装機能：メール送信PHP 最低限の機能を最低限に実装 Bootstrapのclass=“modal”を使っている。主画⾯ではサムネールの画像のみでビ ジュアル訴求、モーダル画⾯で詳細情報が⾒える２段階方式にしている。 （サムネールだけでも楽しめるように） ⼊⼒された情報を設定したメールアドレ スに送るだけのシンプル機能。 ⼊⼒漏れのメッセージ表示はBootstrapの class=“help-block”を使わず、PHPの required文を使っている。
• 24.
  24 実装機能：Bootstrap レイアウト変更・アレンジが簡単にできる Bootstrapをインクルードすることで簡単に画⾯構成を⾏うことができ、かつレ イアウト変更やパーツ追加・アレンジの幅が広がる。 ※独自レイアウト用のクラス名がBootstrapで使うクラス名とバッティングしな いようにCSS設計をする必要がある。 使用箇所 １．画⾯全体のレイアウト (12グリッド) ２．モーダル画⾯ ３．フォームの送信ボタン内 アイコン 見出し 説明文 サブ見出し image image image 見出し（成果）見出し（成果） 見出し（成果） image image image 見出し（成果） 見出し（成果） 見出し（成果）
• 25.
  25 実装機能：Font-Awesome デザインの幅が広がり、効率的に制作できる。 数あるWebフォントの中で特に有名でWebフォント“Font-Awasome”を実装し、 数箇所で使用している。Webフォントの利点は、CSSで配色指定やサイズ指定 が簡単にできること。 使用箇所 １．グローバルメニュー ２．各コンテンツのヘアライン（アクセント） ３．フッタのSNSリンク ４．モーダルさせるアイコン ５．トップの戻るボタン
• 26.
  26 実装機能： notoSansJP ⽇本語文字をきれいに⾒せるこだわり。 Webフォントはほとんど欧文でしか表示ができないが、“notoSansJP”は唯一、 無料で使えるWebフォント。実装するとアップル社のサイトの⽇本語表示のよ うにきれいに表示できる（フォントを読み込むので表示速度は重くなるので⼯ 夫が必要）。
• 27.
  ポートフォリオサイトのPR法
• 28.
  28 ここから学ぶこと - ポートフォリオサイトのまとめ - Googleウェブマスターツールの設定 -ポートフォリオサイトのPR法 - Googleアナリティクスの設定
• 29.
  質問： マーケティング、 Ｗｅｂマーケティングの 勉強をしていますか？ １．している ２．していない ３．わからない
• 30.
  30 ポートフォリオサイトのPR法 ポートフォリオサイトをどう生かすか？ せっかく作ったポートフォリオサイトを公開し放しにしない。流 ⼊とアクセスを増やすきっかけと、レスポンス・計測方法を考え 抜いて、効果が最大限得られるように改善していく。 あなたの ポートフォリオサイト アクセス・閲覧後の レスポンス オンライン オフライン
• 31.
  31 転職活動に効果的に使う場合 実務を示せる絶好のチャンス 紙のポートフォリオでは語れない技術やセンスを評価してもらえ る絶好のPR媒体。サイトですべてが語れるように、コンテンツと 導線に⼯夫をすべき。 あなたの ポートフォリオ サイト 応募のメールに アドレス明示 ⾯接時に直接⾒せ て話題にする SNSで告知して、知人 や第三者のアクセス期待 SEOをチューニング 第三者のアクセス期待 アクセス・閲覧後 のレスポンス ・問い合わせ レスポンス の数は、なるべ く少ない方がよ い。
• 32.
  32 フリーランスのブランディングツール として効果的に使う場合 あなたの世界観・人となりを伝える媒体として使う。 オフラインで会った人向けの営業サポートツールとして活かす。 技術や細かい演出は理解してもらいにくいので、「人間性」を 伝えれるよう、コンテンツに⼯夫を凝らす。 あなたの ポートフォリオ サイト 名刺にQRコードを印刷 しておく 会った時に直接⾒せる キーマンを⾒つけて 営業をお願いする ブログやSNSで積極的に PRする アクセス・閲覧後 のレスポンス ・オファーの提示 ・SNSの友達申請 ・SNSページの 閲覧 レスポンス の数は、できる だけ多い方がよ い。
• 33.
  33 「きっかけ」の作り方 サイトを⾒てくれそうな「一⾔」を考える ●技術志向の人には 「最新技術を網羅しているので、 ぜひ⾒てコメントをください。」 例 ●技術が疎い人には 「今までのストーリーを書いてある のでぜひ⾒て感想をください。」 ●デザインに興味ある人には 「最新デザインです。ぜひ改善点 をご指摘ください。」 ●何に興味があるかわからない人は 「こんなサイトを作ったので、向学 のためご意⾒をいただけませんか」 気の利いた⼀⾔を加えるだけで、アクセス率とあなた の印象はグッとよくなる。 ただ「⾒てください」「URLを添付します」だけ では、脳がなさすぎるから・・・
• 34.
  Googleウェブマスターツールの設定
• 35.
  35 ここから学ぶこと - ポートフォリオサイトのまとめ - Googleウェブマスターツールの設定 -ポートフォリオサイトのPR法 - Googleアナリティクスの設定
• 36.
  質問： Googleウェブマスターツール へ登録したことがありますか？ １．ある ２．ない
• 37.
  37 Googleウェブマスターツールとは Googleに正確に検索されやすくするための無料ツール。サイトを 公開しても自動的に検索対象になるわけではないので、登録・設 定が必須である。あまり知られていないが、とても重要。
• 38.
  38 管理画⾯ 登録をすると、このようにリストアップされ、サイトがGoogleに どのように認識されているか確認・調整することができる。
• 39.
  39 ダッシュボード ダッシュボードでは、操作履歴と「重要メッセージ」として Googleからの連絡（エラーや改善点）を受け取ることができる。
• 40.
  40 Googleウェブマスターツールで できること・わかること 構造化データの指定ができる データハイライターが指定できる HTMLの改善点を指摘してくれる １ ２ ３ 特定ページの順位を下げる操作ができる 検索トラフィックがわかる ４ ５ インデックス状態がわかる クロール状態がわかる ４ ５
• 41.
  41 準備の手順１ 右上の「サイトを追加」を押してポートフォリオサイト（URL） の登録をする。
• 42.
  42 準備の手順２ 「おすすめの方法」で、Googleアナリティクス指定の確認ページ をダウンロードできるので、それをサーバにアップロードし、サ イトの所有権の確認をしてもらう。
• 43.
  43 準備の手順３ Googleにより詳しいサイトの状況を知らせるため、サイトマップ 作成ツールで「sitemap.xml」を作成する。 http://www.sitemapxml.jp/
• 44.
  44 準備の手順４ 生成された「sitemap.xml」をダウンロードして、サーバにアッ プロードする。
• 45.
  45 準備の手順５ Googleにより詳しいサイトの状況を知らせるため、テキストエ ディターで「robots.txt」を作成する。 http://www.sitemapxml.jp/ User-agent: * と書く。 （すべての検 索エンジンに 対して検索対 象にしますよ、 という意味）
• 46.
  46 ここまでのおさらい（ポイント） 各種ファイルをアップロードし、トップページのindex.htmlがあ る階層に「google xxx.html」「sitemap.xml」「robots.txt」 が３つ並ぶようにする。
• 47.
  47 サイトを公開したらGoogleウェブ マスターツールで⾏う４つのこと サイトの設定（使用するドメインの設定） インターナショナルターゲティングの設定 「sitemap.xml」の登録 １ ２ ３ 「robots.txt」の登録４
• 48.
  48 サイトを公開したらGoogleウェブ マスターツールで⾏う４つのこと 「サイトのダッシュボード」→「詳細を表示」を押して、管理画⾯を表示させる。 サイトの設定 インターナ ショナルター ゲティングの 設定 １ ２ 「sitemap.xml」の登録 robots.txt」の登録 ３ ４
• 49.
  49 サイトの設定（使用するドメインの設定） 「www」がいるのか、いらないか、正式なドメインと紐付けを 設定する。
• 50.
  50 インターナショナルターゲティングの設定 初期設定ではユーザのターゲットがアメリカになっているので、 ⽇本に設定し直す。
• 51.
  51 「sitemap.xml」の登録 準備で作成した「sitemap.xml」を追加テストする。
• 52.
  52 「sitemap.xml」の登録 追加テストが正常に完了すると、Googleウェブマスターツールに 登録（Googleに認識される）される。
• 53.
  53 「robots.txt」の登録 準備で作成した「robot.txt」をテスターでテストする。
• 54.
  54 「robots.txt」の登録 追加テストが正常に完了しない場合は、エラーとして表示されるの で、「詳細」を参考に書き換えてアップロードし、テストし直す。 「詳細」に改善 のヒントが書か れているので参 考にする。
• 55.
  Googleアナリティクスの設定
• 56.
  56 これから学ぶこと - ポートフォリオサイトのまとめ - Googleウェブマスターツールの設定 -ポートフォリオサイトのPR法 - Googleアナリティクスの設定
• 57.
  質問： Googleアナリティクス を使っていますか？ １．使っている ２．使っていない
• 58.
  58 Googleアナリティクスとは Googleの無料アクセス解析ツール。無料の上、⾼機能なので業 種・業態を問わずにアクセス解析ツールの定番となっている。 ⽇々細かいバージョンアップがされている。
• 59.
  59 管理画⾯ホーム 登録をすると、このように複数のサイトを管理できるようになる。
• 60.
  60 レポート画⾯ 登録・設定したサイトの解析画⾯（ダッシュボード）が確認でき る。 サイトが複数あ る場合はここか ら選択ができる。
• 61.
  61 アナリティクス設定画⾯ 各サイトの全体像：アカウント -> プロパティ->ビューを横断 した詳細メニューを一覧させてダイレクトにアクセスが可能な画 ⾯。
• 62.
  62 準備：アカウント作成を開始する すでにアカウントがある場合は、アカウント -> 「新しいアカウ ント」を作成から、はじめての使う場合はトップ画⾯の「アカウ ント作成」から登録する。
• 63.
  63 準備：アカウントを作成する 項目をすべて埋めて、新しいアカウントを作成する。
• 64.
  64 準備：トラッキングコードを HTMLに貼る。 アカウントの作成が終わると個別のサイトを識別するための「ト ラッキングコード」が発⾏されるので、HTMLに貼る。
• 65.
  65 準備：動作確認 アカウントの作成が終わったら、実際に解析動作を確認してみる。 ①ブラウザで登録したサイトにアクセスする ②「リアルタイム」->「サマリー」を選択し、サマリー画⾯でリ アルタイムのサイト訪問数を確認する。 ２つのブラウザ でサイトにアク セスすると２訪 問として表示さ れる。 リアルタイム計測以外の解析データは、翌⽇から利用可能。
• 66.
  66 Googleアナリティクスのアカウントを 作成したら⾏うべき３つのこと 「デフォルトビュー」の選択１ ３ 自IPの除外設定 ２ ウェブマスターツールの関連付け
• 67.
  67 １．「デフォルトビュー」を選択する 「アナリティクス設定」->「プロパティ設定」を選択。
• 68.
  68 １．「デフォルトビュー」を選択する 「ビュー」では解析結果にフィルターをかけたり様々なビューを 設定していくことになるが、デフォルトで「すべてのウェブサイ トのデータ」を選択しておくと便利。 解析結果表示を 早く表示できる ので便利。
• 69.
  69 ２．ウェブマスターツールの関連付け デフォルトではGoogleアナリティクスとGoogleウェブマスター ツールは別のサービスになっていてるので、関連付けしておくと 共通データを自動的に共有してより正確なデータが受け取れるよ うになる。 「編集」を押すと ウェブマスターツー ルの画⾯に切り替わ るのでリンクさせる さいとサイトを チェックして「ウェ ブマスターツールに サイトを追加」する。
• 70.
  70 ３．自IPを除外する 正確なアクセス解析データにするために、自分（自社）がアクセ スする際のIP、関係者がアクセスする際のIPをアクセス解析対象 から除外しておく。
• 71.
  71 ３．自IPを除外する 「アナリティクス設定」->「フィルタ」->「新しいフィルタ」 でフィルタ追加画⾯を表示させ、「フィルタの種類」で「除外」 「IPアドレスからのトラフィック」「等しい」を選択する。
• 72.
  72 ３．自IPを除外する 次にIPアドレスを正確に⼊⼒し、「保存」を押す。 IPアドレスが不明な場合は、http://goo.gl/XorhGs を参照し、調べてか ら⼊⼒する。 ※wifiや家庭用回線など毎回IPが変わるポイントは除外できない。
• 73.
  今⽇の まとめ
• 74.
  74 今⽇の まとめ ポートフォリオサイト作成は「意図」と「方法」。 - 「意図」を絞ってサイト制作をする -公開後の「PR方法」もあらかじめ考えておく。 改善して制度を⾼めていく - Googleウェブマスターツールの登録も忘れずに。 - Gooleアナリティクスの登録、チューニング も必ずやること。定期的に確認する習慣をつける こと。
• 75.
  お悩み解決！ 質疑応答
• 76.
  76 よく頂く質問 ? 「いいね！」ボタンはつけた方がいい？ ? SNSへのリンクはつけた方がいい？ ?事例や人の作品には許可を取るべき？ ? 連絡先は載せたほうがいい？ ? どのように改善していけばいいの？
• 77.
  2015年３月度の勉強会テーマ 「Bootstrapの基本をマスターする！」 開催日時 ２０１５年３⽉３１日（⽕）18:30~21:30 場所 都内某所（新宿区）参加希望の方にご連絡します。 na2ken.comにアクセス後「定期勉強会参加申し 込みフォーム」よりお申し込みください。 実習を通して、Bootstrapを基本から 学べるとともに、仕事での使いどころ、 CSSフレームワークの最新動向など盛 りだくさんの内容です。Bootstrapを 使えるようになりたい方、興味のある 方は是非ご参加ください！ この授業を受講された方は無料で参加できます！