FiNCのサイトってどうやって作られているの?│FiNCのクリエイティブこんにちは。FiNCに入社し、あっという間に1年9ヶ月ほどになりました、UI/UXデザイナー中村あずさです。最近ではFiNCプレミアムというサブスクリプションプランの設計に関わっています。FiNCという会社の特長のひとつに、自社サービスの展開と運用が多種に渡っていることがあります。管理栄養士やトレーナーなどの専門家が多数在籍しており、健康にまつわること、ダイエットや美容に関わる知識や体験をいつでも吸収できる環境です。(ボディ・デザイン・プログラム)のリニューアルデザインにつきweb作成の過程について、ご紹介させていただきます。多くの人が、一度や二度、もしくは三度四度とダイエットの経験をしたことがあると思うのですが、私もその内の一人です。ある日、友人の結婚式用に新調しようと試着したドレス姿を見て、『ナンダコレ』となり、ジム通いが始まりました。思い返してみれば20代後半から30代にかけて、仕事がどんどん楽しくなり残業も増え、遅い時間に食事をしたりお酒を飲みに行ったりすることが多い日々でした。運動は好きだったのもあって、ジムで汗をかくことにすっかりはまり、定期的に有酸素運動とマシーントレーニングに勤しみ、あとは気が向いた時にヨガを取り入れたりしながら、本来の二の腕とウエストを取り戻しました。最近は、空き時間が出来た時に都度ジムを利用したり、FiNCのトレーニング動画を見ながら自宅トレーニングを行なっています。ダイエット経験談としてよく聞くのは、目標を達成するまでは何とか頑張っても、目標達成後の気の緩みや続けることが困難な無理なダイエットにより、リバウンドしてしまったという経験です。私は幸い、あるきっかけを機に『このままではまずい』と一念発起し、運動や食事を見直すきっかけを持て、運動する喜びが呼び起こされたことによってたまたま運よくモチベーションが持続しましたが、毎日の忙しさや諸事情により、確実に継続していくダイエットを諦めている方もとても多いかと思います。ー着実に効果を出したい、でも、無理なく楽しく続けたい。自分を好きになれるカラダにしたい。(ボディ・デザイン・プログラム)』です。2ヶ月ほどでボディメイクを行う人気サービスは世の中に様々ありますが、B.D.Pの強みは一体何なのか、このサービスを選ぶとどんな良いことがあるのかを、元トレーナーのマーケターに、徹底的にヒアリングするところからスタートしました。この最初のヒアリングがとても重要で、この際にサービスの特長を心から良いと思えるまで深く迫っており、サービスの全ての概要を細かく掘り下げていかないと、真の魅力を引き出すプロモーションはできません。ヒアリングした結果、B.D.Pの強みの核となるのはこちらの3点でした。◎一人ひとりの生活習慣に合わせてプログラムが組まれる◎ダイエットの知識やノウハウを専門家から直接学ぶことができるから、プログラム終了後もリバウンドがしにくい◎最新の技術を組み込み、おしゃれなスタジオで楽しくトレーニングできる上記の強みを踏まえ、テイストを探っていきます。ターゲットのペルソナを立て、マーケターが作成したワイヤーを元に、ダイエットを始めるモチベーションの上がるレイアウトを考えます。webの作成過程は状況により都度異なりますが、リブランディング!リニューアルデザイン!となったときには、現行より一新させたビジュアル、コピーなど、入る要素の全てがバシッと形になっているプレビューを見て欲しいので、今回は1stビューでサービスの空気感を納得するまで詰めてからレビューを待ちました。1stビューがプロジェクトチーム内で満場一致でOKになったら、ワイヤーに記載されたテキストを元にビジュアルを起こし、セクションごとにプロジェクト内で認識を合わせながら全体の構成を組んでいきます。ここで重要なのが、マーケターが書いてくれたテキストの解釈とビジュアルへの展開の仕方です。自社サービスが多くとも、『素材や訴求方法は自分で提案し作りだすもの』ということです。この画像を使ってください、という指定がある箇所もありますが、イメージしたものや満足できる完成度にどうしても近づけられない、というときは、限られた時間内で最良の素材を手配できるよう、随時提案を行います。私がよしなにダミーで仮置きしていたものが、幸いにも本採用されました。サービスの真髄に迫り、ユーザーとして得られる価値が明確になってくると、トレーナーだったり栄養士でなくとも、ユーザー目線でコピーを提案していくことも可能です。第一弾のデザインラフを仕上げ、全体の雰囲気はいい感じだね、となったものの、B.D.Pって結局何なの?特長がいまいちわかりやすく伝わってこない、というレビューがあり、ファーストビュー下でのサービス説明をもっと明確に訴求することが課題となりました。最初はファーストビュー下にサービス体験者のbefore/afterを載せ、その後サービス概要の展開をしていく構成でした。B.D.Pのサービスを簡潔に訴求した内容に変更した結果が、こちらです。この修正の際にも、元トレーナーのマーケターにとことんヒアリングを行い、お客さん目線で本当にこのサービスを選んで良いのか?という気持ちでうかがうスタンスも合わせ、他社と差別化できる部分、B.D.Pにしかない魅力を抽出しまとめました。全体の構成がまとまったら、各項目を見ていて飽きがこないように、そしてひとつの世界観に没入しながら最後まで夢中で読み切れるように、デザインをブラッシュアップしていきます。全体のトーンとしてはスタイリッシュかつラフに気軽に始められる感じを出しているのですが、お客様から結構な額のお金をいただくサービスのため、安心なサービスであることや、お値段以上に得するポイントはここぞとばかりに訴求しています。いつも密かな目標としています。自分が魅力を感じないもの・ことには迂闊に流されたりせず、みんながいいね!となれて自分も心からいい!と思える方向性や形作りに向けて舵を取り提案していけるよう、心がけています。私はお肉がだいすきなのですが、肉好きの人が肉のフォトジェニックな画像を見たら無条件に『好き!!』となりますよね。その好き!を猛烈に呼び覚ますデザインを、作っていきたい次第です。数ある中から弊社のサービスを選んでくださった方たちに、長く愛用していただけるサービスを育てていけるように、楽しみながら新たな試みにもどんどんチャレンジしていきたいです。自宅トレーニングもサボりがちなので、(幸いにも体重は変化なしだが筋力は落ちているはず...)目先の目標に向かって着実に努力をしつつ、健康作りの新しいメソッドも取り入れていきたいと思います。デザイン関連記事2018.05.31デザイン誰でも簡単に今すぐできるUIテクニック(テキスト編)こんにちは、おかぴーこと岡本勇樹です。FiNCでデザイナー経験がないところからデザインをはじめて、もうすぐ3年が経ちますが、「今週は佳境だ!」「今週が終わればひと段落だ!」を毎週のように繰り返し、今日まで密度の濃い時間を過ごして来ました。そんなサバイバルワークの中で身につけていった武器(UIテクニック)を、いつも使うものや簡単に使えるものを中心に何回かに分けてお伝えできればと思います。デザインをやったことない方にも、資料作りなどに活かせる内容になっていますのでチェックしてみてください。デザインをやっている・やり始めた人にとって、少しでもお役に立てれば幸いです。1回目のUIテクニックは「文字・テキスト」です。意味や内容を正確に伝える場合「文字」で表現することが非常に重要です。静止したものから情報を読み取るには、文字が一番具体的に内容を伝えることができる表現だからです。対話では「ただ伝えること」と「伝わりやすいように配慮して伝える」ことでは伝わり方の結果が大きく異なるように、対文字でも同様のことが言えます。文字がただ羅列してあったり、面白さがなかったり、読みにくいだけで、受け手は読んでくれません。そのため、文字・テキストのUIテクニックを覚えることは、対話でいう「伝え方」をよりよくすることと同等の価値があるのです。それでは早速4つ、ご紹介していきます。これを抑えなければはじまりません。文字間・行間によって、読みやすさも印象も、オシャレさも断然違います。1行やタイトルの時に思い切って文字間を広げたりするとキャッチーな印象になりますし、長文の場合はなるべく狭めて読みやすさにこだわったりするのが一般的かなと思います。文字間はタイトル/サブタイトル/本文など、文字の大きさや長さに合わせてそれぞれ調整する技術が重要です。行間は複数行になる際に文字間とセットで読みやすい数値を探しましょう。正解はないため試行錯誤し、自分が納得いく見栄えに整えましょう。下記画像を見ていただくとわかりますが、要素や大体の配置は変わらなくても、大きさ・文字間・行間が違うだけ...2017.12.19デザインFiNCではデザイナーじゃない人もSketchを使っている!?│FiNCのクリエイティブ初めまして、FiNCでデザイナーをやっているおかぴです。最近、「1年前と顔つきが全然違うね!」とよく言われるのですが、整形ではありません。今回は、主にFiNC社内でSketchがどのように使われているのかについて話したいと思います。Interfaceを作るツールです。FiNCにはそこら中にSketchを使う人、通称“Sketcher”がいます。デザイナーを始め、ディレクターとエンジニアにも“Sketcher”がいますので、どのように活用しているかを紹介します。おかぴ:まずはデザイナーに普段どう使っているか聞いてみます。1人目の“Sketcher”はクリエイティブ部の川永さんです。川永:川永です、まるって呼ばれてます。おかぴ:Sketchを業務で使用されていると思いますが、良いところを教えてください。川永:ファイルが軽いのと、リンク切れがないのがいい。エンジニアも使えるから、共有できるところがサービスデザインにおいていいと思います。スマートフォンの画面やWebの画面作りのスピードは前よりも上がっていると思います。FiNCでは、UIをデザインしたものをエンジニアに渡して実装してもらうという分担になっているので、エンジニアがいかに作りやすくなるかというところも気をつけています。おかぴ:実際、川永さんはCSSやJavascriptも書けるので、エンジニアでも作れるようにするという観点とデザイン的にこれがいいという観点を持っているので、バランスがいいですよね。川永:書き出しが簡単だから、作ったものの共有をはやくできるのがいいと思います。作った画面をドラッグ&ドロップだけでチャットに送信できたり、iconはスライスで選択してショートカットキーを打つだけで書き出せてしまう。あとはSymbol機能を最近活用してます、細かく作れば作るだけ後の人が作業しやすいし、クオリティも統一感があるデザインになります。