「LIGって、なにをやってる会社なの？」と聞かれることがよくあります。編集部門があったり、コワーキングスペースやゲストハウスを運営していたり……、要するにいろいろやっているわけですが、メインの事業はなんといってもWeb制作。
そんな制作の様子を実際に見て、知ってもらいたい！ というわけで、今回ご紹介するのは、Webと紙との違いはあれど、同じように「読者に届く」を考え、雑誌作りをしているクライアント様のメディア制作案件。制作のハードルも高まるなか、Web制作で一番時間がかかるといわれるデザイン決めが、なんと「一発OK」。
「デザインって思い入れが強い部分だからつい口を出したくなりますが、『餅は餅屋』という言葉のとおり、デザイナーさんを信頼してお任せしたほうがいいものができると分かりました」
とクライアントが語った、制作の工程・裏側をご紹介します！
- ＼読んでいただきたい方／
- ●これからWebサイト制作を実施・検討している担当者
●お仕事でWeb制作に携わっている方
▼目次
- <他の制作実績もこちらから見れます！>
- 新規LP『Startup GRIND TOKYO』制作のすすめ方、期間を全部お見せします！
予約数が30%アップ！TOKYO CRUISEのサイトリニューアルが成功した理由
今回紹介する案件
サイト名：ぎゅってWeb（https://gyutte.jp/）
サイトの種類：メディアサイト
クライアント：サンケイリビング新聞社
新規orリニューアル：新規
サイト制作の背景：
サンケイリビング新聞社発行の保育園配布情報誌『あんふぁんぷらす』が、2017年5月、『ぎゅって』と名前を変え、より小さいA5サイズになって生まれ変わりました。リニューアルの意図は「働くママに、より効率的に情報収集してもらう」こと。そのためにもWebでの情報発信は必須、というわけで今回、『ぎゅって』のWebメディアの制作依頼をいただいたのが始まりでした。
制作の際に意識したのは、子育てに仕事にと忙しいママたちが、いかに効率よく情報を手に入れられるかという点。
全体的に、文字が多くてもすっきりと見えるようなデザインを意識し、記事一覧部分は細切れの時間のなかでも必要な情報がすぐに分かるよう、あえて見慣れたニュースサイトと同様のデザインにしています。
また、トップページでは、個性を出すために、見切れの部分を作りました。
「連載記事の新着だけを見る」をクリックすると、記事一覧部分が横にスライドし、ほかの記事を選択することができるようになっています。
制作背景
ターゲットは働くママ。でも制作メンバーは全員独身。
今回制作にあたったのはこちらのメンバー。
（左から）
この4人、全員が今のところ「独身」。つまり、今回のメディアサイトのターゲットである「働くママ」の気持ちを分かっている人がいない状態でした。
しかし、Webサイトを制作するにあたり、対象となるサービスの理解は必須。サービスサイトならそのサービスの強みや誕生の背景、コーポレートサイトなら事業の中身だけでなく会社の歴史や働いている人の想いまで調べるものです。
そこで今回このチームがとった手段は、「働くママの気持ちを知り、理解を深める」ためのワークショップの開催でした。
ワークショップの意図は「働くママの気持ちを知る」こと
ワークショップに参加してくれたのは、メディアのターゲットである働くママ（と、パパ）たち。サンケイリビング新聞社様からは5名、LIGからは2名の該当者に集まってもらいました。
「働くママ」と一口に言っても、『リンネル』が好きか『Oggi』が好きか、スタバ派かマック派かで、ターゲットとなる層は大きく違います。まずその部分のアンケートをとり、人物像を明らかにしました。
また、「大変なことはなに？」「幸せと感じる瞬間は？」などの質問を用意し、できるだけ多くの回答をふせんに書いてもらいました。それをホワイトボードに張り出し、それぞれ理由を語ってもらい、自由に会話してもらいました。
働くママの気持ちを分析した「デザインコンセプト」が完成
ワークショップで知ることができた「働くママ」の気持ち。そこから潜在的なニーズを紐解き、『ぎゅってWeb』に求められる役割とはなにかを考えました。
導き出された「落ち着き」「優しさ」「きちんと感」「（ママの）先輩」という4つのキーワードを元に、当てはまるデザインを抽出。提案資料にまとめ、クライアントに提出しました。
クライアントに聞いてきました
では、そのデザイン提案資料を受け取ったとき、クライアントはどんな気持ちで「一発OK」を出してくれたのでしょうか？ ディレクターのちゃんれみが、担当者の山澤さんにインタビューしてきました！
 |
山澤 知彦さん サンケイリビング新聞社 デジタルコンテンツの担当者。自社のWeb業務を複数手がけ、Webの背景にも詳しい。 |
|---|
ちゃんれみ：今回はご依頼いただき、ありがとうございました！ 山澤さんのWebリテラシーが高すぎて、実はみんないつも以上に緊張してプロジェクトにあたっていたのですが、気に入っていただけたようですごく安心しました（笑）
山澤さん：そんなにビビらせていたとは（笑） 僕、過去に自社のサイトリニューアルを担当していたんですよ。だからちょっと普通の担当者さんよりは詳しかったのかも。LIGさんのことを知ったのもその頃。分からないことを検索して出てきたLIGブログがきっかけでしたね。
ちゃんれみ：そうだったんですね。LIGにはどんなことを期待して依頼してくださったんでしょうか。
山澤さん：LIGブログのいちファンなので、一緒に仕事してみたいという気持ちももちろんあったんですが、それ以外だと、情報感度が高い会社さんにお願いしたいと思っていました。LIGさんは常に情報発信をしていて、センス的にも技術的にも安心ができると感じました。
ちゃんれみ：ありがとうございます！ 逆に不安だったところはありますか？
山澤さん：制作メンバーが独身の方ばかりだったので、働くママの気持ちを理解してもらえるか不安ではありました。だから、あのデザインコンセプトシートを受け取ったときは、ここまでちゃんと理解してデザインを作ってもらえるんだ、と嬉しくなりました。
ちゃんれみ：良かったです。ワークショップでみなさんにご協力いただいたおかげです！
山澤さん：はじめ、デザインのためのワークショップと聞いていたので、メインカラーや好みのデザインの話をすると思っていました。でも、当日議題にあがったのは「大変だと感じる瞬間は？」「働くママの幸せってなに？」など、デザインとどうつながるのか分からない話ばかり。帰り道みんなで「デザインの話、全然しなかったね」「どうするんだろうね」なんて話したのを覚えています。
ちゃんれみ：そこからあのコンセプトシートができあがってきたわけですね（笑）
山澤さん：です（笑） それぞれのパーツにきちんと「なぜこのデザインなのか」の説明がされていて、納得できました。結果的に、弊社で制作に関わっていたメンバー誰ひとりとして異論はありませんでした。
デザインって、いつも決まるまで時間がかかるんですよ。人それぞれ好みも想いもある部分だから。なので、一発で決まったことに自分たちも驚きました。「餅は餅屋」という言葉のとおり、デザインのことはデザイナーさんを信頼してお任せしたほうが、ちゃんといいものができるんだと分かった瞬間でした。
ちゃんれみ：私たちも、信頼して任せてくれるサンケイリビング新聞社さんとお仕事ができて本当に嬉しいです。それでは最後に、サイトで気に入っている部分を教えてください。
山澤さん：テキストが多くてもスッキリと見えるところが特に気に入っています。サイトの読者である働くママが記事を読むシチュエーションがよく考えられていると思います。忙しいときでも、パッと読もうという気持ちにさせてくれる。
また、トップは「表示崩れかと思った」と言われることもある “攻めた” デザインですが、画一的になりがちなニュースサイトのなかでサイトの個性となっていて、その点にも満足しています。
ちゃんれみ：お話を聞かせていただき、ありがとうございました！
制作メンバーに聞く「それ、私がやりました！」
ディレクター：ちゃんれみ
 |
ちゃんれみ ディレクター。制作の進行管理やワークショップの開催、ワイヤーフレームの作成や機能設計などを担当。 |
|---|
今回は、Webだけでなく紙媒体の制作が別軸で同時進行していたこと、わたしたち制作メンバーがターゲットから遠いことから、紙媒体との連動とターゲットの理解が必須だと思っていました。
ターゲット理解のためにできることは、ヒアリングのほか、アンケート調査や各種データの分析までさまざまありますが、今回は、『ぎゅって』の創刊に合わせてWebの公開が必達であったことから、短時間でより純度の高い情報を集めるため、ワークショップを開催しました。
当日は、Web担当者様だけでなく、さまざまな部署の方と、ターゲットに近い働くママに参加していただきました。結果、たくさんの意見を集めることができ、そこから生まれる会話から現場の温度をつかむことができました。
プロジェクト内外の方々とコミュニケーションをとるきっかけにもなりますし、今後も積極的にワークショップを行っていきたいです。
デザイナー：もりた
 |
もりた デザイナー。サイトのデザイン制作とコンセプト設計を担当。サイトで使用されているアイコンやイラストだけでなく、テクスチャまですべて手描きで、『ぎゅってWeb』のために書き下ろしをしました。 |
|---|
ディレクター同様、デザイナーにとってもターゲット理解は必須です。今回も、どうやってその課題を解決すべきか考えていたところ、ちゃんれみがワークショップの開催を提案してくれたので、それを元にデザインを組み立てることにしました。
まず、ワークショップで出た要素を分析して、読者のニーズと、それに対する『ぎゅってWeb』の役割を伝わりやすいキーワードに落とし込み、それに当てはまるデザインを導き出しました。そして作成したのが、記事でも紹介した「デザインコンセプトシート」。
お客さまにデザインの意図をきちんと説明するのもデザイナーの仕事です。制作期間が極端に短いときはコンセプトシートという形ではないこともありますが、毎回、納得していただけるよう、丁寧に説明することを心がけています。
また、今回のプロジェクトは使用するパーツの種類が多く、その作成にもかなり力を入れました。ぜひたくさんの記事を見てみてくださいね。
フロントエンド：つっちー
 |
つっちー フロントエンドエンジニア。サイトの表側のコーディングやアニメーション、記事データ登録のためのスタイルガイド（マニュアル）作成を担当。 |
|---|
もりたが力を入れて作ったデザインを最大限に生かすべく、今回僕は、UIの実装にかなりこだわりました。
たとえば、トップ画面や各記事の上のほうでくるくる回る輪っか、プレゼントボックスにアイコンを乗せると揺れるアニメーション、メニューを開くと「×」型に切り替わるハンバーガーメニューなど、随所に仕掛けが施してあります。
また、メディアサイトである『ぎゅって』は、クライアントの社内や外部ライターなどが記事を更新していく必要があるため、「このコードを書くと、こんな風に表示される」というのが分かる入力ガイドを作りました（今回、お見せすることはできないのですが……）。見た目の説明をするだけでなくSEOも考慮して、文法上の注意点などもかなり細かく記載しました。
バックエンド：ハル
 |
ハル バックエンドエンジニア兼フロントエンドエンジニア。WordPressの構築やGoogleタグマネージャーなどの外部サービスの設定を担当。 |
|---|
僕が主に担当していたのは、サイトの裏側、つまり、管理画面のカスタマイズの仕事です。今回、記事を執筆するライターさんが多くいらっしゃるとのことだったので、みなさんの負担にならないよう、分かりやすい管理画面作りを心がけました。
また、Googleが推奨するAMPの対応や、キュレーションメディア用の対応も行い、メディアサイトならではのカスタマイズを多くさせていただきました。今回は、ターゲットである忙しいママのストレスにならないようサイト速度にも気を使って、WordPress専用の高速仮想環境「KUSANAGI」の採用もさせていただきました。
当初、パフォーマンスと新技術に触れたいという思いもあり、HHVMを採用したのですが、実は途中で、うまく動作しないではまるといった問題もあったりしました（笑）。PHP7に切り替えて、スケジュールはなんとか守ることができました。
今後また機会を作って、しっかり原因究明した上で、HHVMも再チャレンジしていきたいですね
最後に
LIGでは、コーポレートサイトからキャンペーンサイト、メディアサイト、ランディングページなど、あらゆるWebサイト制作のご相談を承っております。
新しくサイト制作をしたい方や、今あるサイトに課題を感じている方は、お気軽にご相談ください♪
クライアントに寄り添って、課題解決を支援します
（アー写風写真撮りたいといったら前のめりにポーズをとってくださった）サンケイリビング新聞社のみなさま、ご協力ありがとうございました！
- <他の制作実績もこちらから見れます！>
- 新規LP『Startup GRIND TOKYO』制作のすすめ方、期間を全部お見せします！
予約数が30%アップ！TOKYO CRUISEのサイトリニューアルが成功した理由
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
