月間350万PVのインスタメディア 『Tripi』のWEBメディア制作振り返り
このnoteは、「Tripi」というWEBメディア制作に私がどのように携わり、どのような学びを得たのかを振り返るnoteです。
最近noteを書けていなかったのでざっと振り返りたいと思います！
（9月の4連休はUnplan白馬に行くのでたのしみです🐴）
Tripiとは
『Tripi（トリピ）』
フォロワー数3万人を誇るインスタトリップマガジン
可愛い人気スポットからお洒落な穴場スポットまで、お出かけスポットを紹介しているインスタのアカウント
今回は、このインスタトリップマガジン『Tripi』のWEBメディアを制作したいとのことで、WEBサイトの設計、ディレクション、デザインと、WEBメディア制作を0からリリースまで携わることになりました。
WEBメディアということでWordPressを提案したものの、私は0から実装することができないので、エンジニア探しからスタートして、無事早稲田の後輩のばやしこくんにお願いできることに。
TripiのWEBメディアとしての価値
そもそも、このWEBメディア制作の背景として、
インスタグラムは投稿がストックされていくものの、同一アカウント内の投稿における検索性に優れていない。
また、当たり前だが、検索窓で検索する際、一語でしか検索できない。
（福岡のカフェ調べたいなぁと思っても「福岡 カフェ」とは検索できない）
そこで、今まで投稿してきた旅行スポットを、エリア別、カテゴリ別、キーワード別に検索できるプラットフォームを作り、「おしゃれ女子が行きたくなるスポットをもっと簡単に見つけて、気軽に旅行を楽しんでもらえるようにしたい」
そんな依頼者の想いがありました。
つまり、TripiのWEBメディアとして求められている一番の価値は「検索性」。
Tripiのインスタグラムとしての価値：「出会えること」
（自分の行きたい場所と偶発的に出会える）
TripiのWEBメディアとしての価値：「検索できること」
（自分の求めている情報を能動的に収集できる）
ユーザーが求めている情報を、迷うことなく、スムーズに、心地良く、検索することができるようにするための設計が、今回のWEBメディア制作において最大の鍵でした。
制作フロー
概要や方針・スコープ・要件の擦り合わせをし、スケジュールを引いて、WordPressで実装を進めるにあたっての環境構築（ドメイン連携、プラグイン、テーマの導入 etc...）が終わったら、例の如く私の必殺技「競合調査」が登場！
WEBメディアの制作が私自身デザインすら初めてだったので、旅行メディアや女性メディアなど10つ以上調査して傾向や特徴を把握し、踏襲すべき点を見極めました。
そこから、デザインの方向性の認識を揃え、ワイヤーを作成し、WEB→SPとデザイン、プロトタイプを制作して、実装に移っていきました。（はしょりすぎ）
ちなみにTripiのデザインのトーンの要望は以下でした。
○ 可愛らしい、トレンド感、オシャレ、くすみカラー、親しみやすい
× 奇抜、真面目、堅苦しい
＝可愛いけど可愛すぎず、大人っぽいけど大人っぽすぎず、親しみやすさとオシャレが共存している
インスタアカウントのデザインの世界観に合わせつつも、上記の要望を踏まえて、カラーコードを微調整し、最終的に「くすみピンク」をPrimary Colorとして制作することになりました。
Tripiのこだわりをちょっと紹介
① 写真で魅せる記事
一般的なWEBメディアはSEO対策も兼ねて、とても長文なケースが多いと思いますが、Tripiの場合は、発端がインスタグラムということもあり、「写真」に価値を感じているはず。
もちろんSEO対策もしたいけれど、既存のTripiのインスタのユーザーを大事にしたいという代表の想いから、既存ユーザーに馴染んでもらえるように、写真にこだわった記事ページになっています。
② キーワード、カテゴリ、エリアの3つの検索機能
Tripiのユーザーは若年層女子が大半なので、スマホで閲覧するケースが多いはず。
そんなスマホから訪れたユーザーが、トップページから3つの手段（①キーワード検索 ② エリア × カテゴリ検索）で快適に検索できるように、どちらの検索窓も設置しています。
※ 他のWEBメディアは、
① 一度エリア（or カテゴリ）のみで検索してから、再度絞り込んで検索する形式
② そもそも、エリア×カテゴリ の掛け合わせの検索ができない
場合が見受けられる。
③ キーワード検索のちょっとした工夫
福岡にあるカフェを調べたいと思い、キーワード検索する際、普通なら
「福岡 カフェ」とスペースを開けて検索しますよね。
ですが、ユーザーがうっかりスペースを入れ忘れてしまった場合（「福岡カフェ」）でも、スペースを入れた場合と同様の検索結果が表示されるように、最後の最後に、代表のユーザーへの気遣いから、形態素解析の処理を行うことに。（タグを付けることで解決することかもしれないが、タグを毎回つけるのも大変なので・・・）
※ キーワード検索機能を実装する場合、取り入れているのが一般的なのかもしれませんが、
振り返り
もっとこうしたら良かったなぁ〜とか、制作途中から気付いて初めから擦り合わせておくべきだったなぁ〜てところがあったので、振り返り＆次回への教訓として箇条書きしていきます。
WEBメディア制作（WEBサイト制作）する方のお役に立てたら嬉しいです。
依頼を受ける前の擦り合わせ
● 制作画面
プライバシーポリシー、利用規約、会社情報など細かいページまできちんと制作するページを擦り合わせること。
会社が既にある場合は、コーポーレートサイトが存在していることが多いと思うのですが、どこに遷移するのか、利用規約なども制作する必要があるのかなどヒアリングを徹底する。
依頼主側とプロダクトの事前の擦り合わせ
● キーワード検索機能の定義
キーワードで検索した時に、どのように表示されるのが理想の状態なのかをパターン別に事前に定義しておくこと。
前述した形態素解析の部分もそうだが、記事を書いてもらう際に検索を意識したキーワードも入れておくべき。
● その他細かい部分
・インスタに遷移する時はアプリに遷移するのか、WEB上で遷移するのか
・SEO、アクセシビリティ、AMP対応について
- 検索からの流入にどのくらい力を入れるかどうか
・サービスの一番の価値、その価値提供の機能、ユーザーシナリオを事前にきちんと擦り合わせしておく
・GAとSearch Consoleはどちら側が設定するか
・OGPの仕様（ twitterカードの種類など）
・理想のアニメーション
実装前のエンジニアとの擦り合わせ
figma上のガイドラインなどだけでなく、もっと口頭でも擦り合わせをし、
決定した事項や新たに更新された事項は、ストック情報としてどこかに一覧として書き出しておく。
●反省点の箇条書き
・共通フッター部分の擦り合わせ
・画像やアセットの書き出しの拡張子について
- 拡張子の知識レベルを確認（PNGをsvgで書き出さない）
- どっちが書き出すかの擦り合わせ
- svgのテキストデータはアウトライン化必須
※ PNGデータをsvgで書き出すと解像度悪くなります。
・レスポンシブデザインで
- デバイスに応じてデザインが可変する場合、具体的にどこのmarginを固定して欲しいか伝える
・パンくずリストの表示名やSP時のスクロール
・hoverの状態を全て丁寧に擦り合わせる
- 記事メディアは写真の部分とテキスト部分があるので、どこがhover要素でどのように変化するのか見落とさない
・テキストボタンの時のタップエリアの擦り合わせ
- 背景のdiv全体をタップエリアにする
デザインする上での留意点
・borderは1px以上（今まで0.5pxにしていたことがあった）
・カテゴリ検索、エリア検索で、どちらも選択しない状態の選択肢を入れておくことを忘れないように（例：関東全エリア、エリアを選ぶ、カテゴリを選ぶ）
・書き出し時に余白ができないようにassetを整備しておく
WordPressやFTPの特性理解
・入力フォームはデフォルトだとborderが付くのでCSSで消す
・入力フォームのフォーカス時のデザインが四角形なので形を変えるか消す
・セレクトメニューの位置がフォームに重なるので変更してもらう
・記事のURLに関して
- タイトル名をURLにすると記号が入ると文字化けするので、番号指定の記事URLなどに変更すると良い
・FTPは、リアルタイムで同時にファイルを編集するとGitHubのように上手くマージされず、どちらかの編集が消えてしまうことがあったので、編集の時間を変える＆毎回ファイルをダウンロードして編集する
最終チェック
iphoneXSなどのデバイス、safari、chromeなどのブラウザ、あらゆるチェックを細部まで怠らないこと。
記事入稿マニュアル
WordPressの使用方法、記事の入稿方法などマニュアルとして最後に渡してあげると親切だと思います。
エンジニアと一緒に作成しました！
私は初めてのWEBメディア制作でしたが（エンジニアは経験あり）、最終的には3ヶ月でリリースすることができ、関わった人みんなも何かしら得るものがあったPJにはなったのではないかと個人的には思っています。
依頼してくれたかとこーくんもエンジニアのばやしこくんも、ここまで読んでくれた方もありがとうございました！！！
Tripi使ってみてね〜 ！！！❤︎
この記事が気に入ったらサポートをしてみませんか？