business

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を
使えるようになりたい方、興味のある
方は是非ご参加ください！
この授業を受講された方は無料で参加できます！