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