公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

• このページのID/パスワードの情報はツイートなどされないようにお願いします。
• CSS Niteのコンテンツの再利用について

Twitter

ツイートは下記にまとめました。

• CSS Nite in Yokohama, vol.2 - Togetter

動画について

ダウンロード期限があるものもありますのでご注意ください。

• OS X Yosemite+Google Chromeの組み合わせでダウンロードができないことがあるようです。お困りの場合には、異なるブラウザーでお試しください。
• 利便性のため、パスワードを設けず、プライベートリンク（リンク先を知っている人だけが見られる）になっています。URLをツイートなどされないようにお願いします。

6年間運用して分かったブログ運営の効果と、成果を出すコツ
阿部 正幸（KDDIウェブコミュニケーションズ）

CSS Nite YOKOHAMA Vol.2に参加いただきました、みなさまありがとうございました。
第一セッションで登壇しました、KDDIウェブコミュニケーションズの阿部です。

私のセッションでは6年間運用したブログについてを話させていただきました。
ブログの運営は、下記の事項が重要です。

• 目的を持ち、継続運営すること
• 流入経路を知ること（解析で）
• CVに関与するページを知ること（解析で）

ブログの運営を継続させるために

• 運営する目的を持つ
• 書き手のモチベーションのために、書き手が書きたいことを書く

PVアップのために

• ロングテールを意識する
  • 書きたい記事の検索ボリュームを知る
  • ユーザーが欲しがることを知る（第二検索ワード）
• 流入が多いキーワードは記事の質を高めてみる

CVアップのために

• ユーザーが欲しがる記事と、宣伝記事は比率が大事。CPIブログは5:1程度
• どのページがCVに関与しているかを調査し、何がCVにつながるかを分析する

これらのことを意識して、ブログを運営することでPV、CVを伸ばすことができます。
皆さまもぜひこれらのことを意識して、運営を試みてください。

参加者からの質問

Q. ユーザーに読んでもらえるような記事をつくるためには、最初の一行とタイトルにキーワードをどのようにいれると良いのか？

A.
どんなコンテンツでもそうですが、記事を読んでもらうためにタイトルと、冒頭はものすごく重要です。
まずタイトルですが、ひと昔前までは、ついクリックしたくなるような、あおりタイトルが流行りました。

（例）ラーメン屋の記事の場合

• 絶対教えたくない厳選ラーメン店20選
• 趣向を極めた東京のラーメン厳選10店

このようなあおりタイトルは最近減りましたね。
最近はシンプルに、一番伝えたいことが入っていれば良いと思います。

• 東京渋谷の人気ラーメン20選

冒頭に関しては、ユーザーに共感することを書くと良いでしょう。
ユーザーがどんな気持ちでその記事を読もうと思ったかを考え、ユーザーが共感すること書くことで、離脱を防ぐことができます。

（例）
美味しいラーメンを食べると幸せになりますよね。ただ渋谷のラーメン店は数多くあり、
どこに行けば良いか迷いませんか？私はいつも迷います...

そこで今回は私が実際に行って味を確かめた、東京のラーメン屋を20店紹介します！！

Q. MOCHIYAのロゴは自作ですか？

A. デザイナーに作ってもらいました。必要であれば紹介します＾＾

関連リンク

• Google Search Console
• 第二検索ワード調査 Goodkeyword
• 検索ボリューム調査 aramakijake.jp
• 共起語分析ツール

ソーシャル

下記は私のソーシャルアカウントです。
お気軽にフォローいただけると幸いです。

• Facebook

• CPIスタッフブログ

さいごに

セミナーに参加いただきました、皆さまありがとうございました。
またどこかのイベントで皆様にお会いできることを楽しみにしております。

テレビとウェブの素敵な関係は築けるか？
石渡 秀和（tvkコミュニケーションズ）

テレビ番組のHPはアクセス解析はほとんどされていません。

テレビ業界はWeb視点では未開の地なので、開拓者精神のある方はぜひテレビ業界に来てください！ｓ

Google Search Console + SNS を駆使した、読まれるコンテンツの作り方
湊川あい（フリーランスWebデザイナー・漫画家・技術書執筆）

アンケートにご記入いただいたご質問への返答

• Q.「フォロワーの増やし方も知りたいです」

  • A. まずはツイッターやnoteのプロフィールに何をやっている人かわかる肩書きをつけました。
    • 私の場合、初期はツイッターフォロワー200人、noteフォロワー0人でしたが「絵を描くWebデザイナー。マンガでわかるWebデザイン連載中」と書きました。
    • 肩書きをつけたら、それに合わせたコンテンツを配信していくと、自然とそのコンテンツを求める人たちがフォローしてくれるようになりました。
    • 無名の頃から出版の声がかかるまでの6ヶ月、具体的に何をやったかは、こちらの記事にまとめています。 https://respective-colours.net/illustration/481

• Q.「3年前からマンガを描き始めたとのことですが、上達のコツはありますか？

  • A. 好きだなと思う絵柄のマンガを真似して落書きしたり、人体デッサンの本を買って模写したりしていました。
  • 30秒ドローイング（30秒経過すると、画像が次の人物のポーズに切り替わる）でクロッキーを描くのもゲーム感覚でできておすすめです。 https://get.adobe.com/jp/flashplayer/

• Q.「マンガだと内容に疑問を持ってしまう先入観がある。そのあたりどうでしょう？」

  • A. はい、そのように思う方もいらっしゃると思います。なので、私の場合は概念部分はマンガ、ハンズオン部分はテキスト、紙媒体だと伝わりにくいものはWebや動画という形で、適材適所で表現技法を分けて使っています。
  • 人によっては「テキストだけの方が理解しやすい」という人もいらっしゃいますし、「そもそもマンガを読む習慣がない」という方もいらっしゃいます。また一方で「文章を読むのが苦痛」「イラスト化されていた方がわかりやすい」「動画の方がいい」という方もいらっしゃいます。結局のところ、その人にとって一番わかりやすいコンテンツを選んでいただければ良いのではないかなと考えております（^^）

制作会社も知っておくべきデジタル広告の最新情報
〜店舗誘導とデジタル広告・検索広告とSEO、キーワードを知るならデジタル広告〜
石黒 康修（石黒堂）

自動化は、ある程度の広告配信母数がなければ実施は難しいところもあります。
広告配信母数が少ないと、学習までに時間がかかりその間に、入札価格が荒れることもあります。

hagakure導入のためのステップ、Gorin設定について

Googleでも強く推奨されている、自動最適化のロジックです。講座ではお話ができなかったのですが、こちらの資料を見て設定いただくとわかりやすいです。

The right tool for the right job
適材適所で使い分ける正しいツールの使用法
鷹野 雅弘（スイッチ）

ご参加ありがとうございました。

セッションの補足です。

• 同じアプリケーション内でも、同じ結果を得るのに、複数のアプローチ（異なるやり方）があることが多い
• どうやったら早く、キレイに、ラクに仕上がるか、を考えながら、ワークフローをリファインしていくこと自体が「クリエイティブ」な作業。クリエイティブとは、成果物ではなく、創意工夫や気配り・心配りのプロセス
• 何より「ひらめきをカタチするスピードが上がること」が美しい。「あれ？これ、どうやるんだっけ？」と迷っていたら、せっかくのインスプレーションは色褪せる

アンケートでの質問への回答

Windowsで10のないWindowsの場合、（XDの使用を）あきらめるしかないのでしょうか？

残念ながらYesです。

リンク集

その他

• 『ノンデザイナーズ・デザインブック』20周年記念 | マイナビブックス
• 応募方法のまとめ

Excel方眼紙

• 時間を奪う「Excel方眼紙」問題を公開討論へ！ 生産性の低下に本当につながるのか - エキサイトニュース(1/2)
• 「Excel方眼紙」の何が悪い？ - 日経トレンディネット
• 教えてほしい。Excel方眼紙って何がそんなに悪いの？ ホントのちゃんとした理由教えて。納得させてくれよ～ | Gabekore Garage
• あなたのExcelスキルが120%活かせるWebアプリ作成ツール -Forguncy（フォーガンシー） | グレープシティ株式会社

Photoshop

• ベテランほど知らずに損してるPhotoshopの新常識（4）まだスライスで消耗してるの？「画像アセットの生成」でスライス不要のサクサク切り出し – Adobe Creative Station
• 顔のぼかしやモザイクをスピーディに。そして修正しやすく - DTP Transit

XD

• Adobe XD アップデート – Adobe Creative Station
• ProtoPie - Prototype mobile interactions as easily as Pie
• ProtoPie - Basics
• 【Protopieのススメ】UIデザイナーのためのインタラクションモックアップツール - Qiita
• "Protopie"を使って簡単に動的なプロトタイプを作ろう Part1.スクロールに応じて動くナビゲーションバーとローディング | Nagisaのすゝめ

SNS

TwitterやFacebookなどでもつながっていただければ幸いです。

• Twitter
• ブログ
• Facebook（著者、講師）
• Facebook（個人）
• Instagram

Facebookで友達申請をお送りくださるときには（スパム避けのため）「〜のセミナーに参加した」等、ひとことメッセージをお願いします。

協賛、協力

• 
•