KAI-YOU Premiumのトップページリニューアルを振り返る
こんにちは、KAI-YOU でUIデザインを担当しているPENTAGRAM（@PENTVGRVW）です。お久しぶりのブログ更新になります💪
KAI-YOUが運営している月額制サービス『KAI-YOU Premium』では、2021年1月にトップページのリニューアルが行われました！（※その際のお知らせはこちらから）
ある意味サービスの顔とも言えるトップページのリニューアルにはアイディア出しからリリースまでに約3ヶ月ほどかかり、（当時）開発部以外からのメンバーにも参加してもらったりとかなり大きなプロジェクトでした。
今回は、そんな紆余曲折あった3ヶ月間をざっと振り返ろうと思います。
なぜリニューアルしたのか
今回、KAI-YOU Premiumのトップページをリニューアルしたのは、以下の2点が大きな理由でした。
① コンテンツ量が増え、多種多様な記事があることを知ってもらいたい
② 記事の新しい/古いに囚われない探し方（dig）を提案したい
① コンテンツ量も増えたので、多種多様な記事があることを知ってもらいたい
2019年のリリースから1年半が経ち、400本以上の記事がリリースされています。
KAI-YOU Premiumが扱うのは「ジャンルを横断し世界をよりワクワクさせるポップなコンテンツ」です。目的の記事を読んで終わり〜ではなく、自分の触れたことがない様なジャンルやカルチャーに対して、興味を持っていただくためにより多くのコンテンツが選べる・目に入るようなデザインを目指しました。
② 記事の新しい/古いに囚われない探し方（dig）を提案したい
メディアはどうしてもリリース情報や時事的なニュースを取り扱うことが多くなるため「最新順」にコンテンツが並びがちです。ですが、KAI-YOU Premiumが扱うコンテンツは"鮮度"に囚われません。
古いから面白くないなんてことはありません。また、より多くの方にコンテンツが届けられるよう、投稿日がコンテンツを選ぶネガティブな基準にならないよう、今回のリニューアルでは「最新」や「新着」といった言葉を可能な限り排除しています。
興味の入口を増やすために
もっとユーザーに「回遊」してもらうためには、興味の入口を増やす必要がありました。そのために既存のサブスクサービスはもちろん、様々なWebサービス、モバイルファーストをより意識していくためにアプリデザイン等の調査を重ねました（※画像はその一部）
いろいろなレイアウトを試していくなかで、一つずつ記事を並べるのではなく、ゲーム、VTuberといった具体的なジャンルやインターネットの最新流行といった抽象度の高いものなど、テーマを持った塊としてコンテンツを表示することで「興味を連鎖」させることができるのでは、という仮説に辿り着きました。
興味を連鎖させることで、これまで一覧ページに行かないと見えづらかった「こんな記事もあるんだ！」というコンテンツの多様さをより見せやすくなります。さらに、様々な角度から選択肢を提示することでユーザーがその中から自分が気になるものを選ぶ余地も残すことができるため、このアイデアは積極的に取り入れることになりました。
ベストなコンテンツ量を探る
表示する要素を決定したあとは実際の画像やテキストを配置してバランスを確認します。純粋に表示するものが増えたのでユーザーがどこを見ていいか分からなくなってしまうのを防ぐためです。
ユーザーがその記事を読むか判断をする際には、以下の2つが重要になります。
・サムネイル（画像）で判断する
・テキスト情報（記事タイトル等）で判断する
それぞれの要素がユーザーにとって使いづらくなってしまわないよう、背景色のような大きな要素から記事情報のような細かい箇所までを順々に詰めていきました。 デザイン完成後は、AdobeXDのプロトタイプ共有機能を使うことで実際に社内の人たちに実寸サイズのデザインレビューを手伝ってもらっています。
きちんと開発段階で使用感を確認することでリリース後に大きな違和感を与えないようにするのと、開発側が間違った方向に走り出していないかチェックすることができます。 たくさんの人に協力してもらう必要があるので時間こそとられてしまいますが、大きいプロジェクトなので細かく舵を取っていくことでリカバリーも早急に対応することができました。急がば回れですね。
本格的なコンテンツの入れ込み
デザインのフィードバックが完了したら、さらに詳細な情報を入れ込んでいきます。文字数の多い/少ないものが入っても問題ないか、ホバー（要素をタップ👆）した際の動き等、イレギュラーが発生してしまわないか想定に想定を重ね、一つずつ不安要素を潰していきます。
この段階で、推しが参加している記事で登録してくれたユーザーが、推しの過去の記事を見逃してしまわないよう、直感的に記事を探しやすくするために「クリエイター枠」も追加されました。
確認を重ねてかなり形が固まってきたところでさらにブラッシュアップ！PCユーザー向けにタイトルやサムネだけでは感じ取れない面白さを補足できればということで、マウスホバーで拡大＋詳細情報が表示されるようになりました。
実装を担当してくれたエンジニアと何度も操作感を擦り合わせ、なめらかな変化を再現してもらいました（感謝🙏 ）
他にもサービスを安心して使っていただけるように各要素の*1角を基本丸めるようにしたり、お気に入りの連載の更新状況を一目で分かるように連載ステータスに合わせてアイコンや本数を表示するようにしたりと、痒いところに手が届く施策を意識しました。
リリースへ
こうして約3ヶ月の開発期間を経て、無事リニューアルしたトップページをリリースすることができました！
リニューアルプロジェクトはゴールではなく、これからもっと良いコンテンツを届けていくためのスタート地点だと考えています。ですので、リリース後はリニューアルで増えた要素がちゃんと機能しているか日々チェックしたり、改善の余地がないか探っています。
もちろん、開発陣だけでは気付けない部分もあるかと思いますので、どしどしご意見ご要望いただけると嬉しいです！一緒にサービスを育てていけたらなと思います🙇♂️
おわりに
KAI-YOUでは、エンジニアを絶賛募集中です💪
興味のある方はぜひのぞいてみてください！一緒にお仕事できる日を楽しみにしてます〜〜〜
また、noteでも社内の様子やお知らせ、編集長のコラムを発信中です✨
こちらもチェックお願いします！
駆け出しエンジニア、WebメディアKAI-YOU開発部に仲間入りしました
はじめまして！
KAI-YOU開発部新米エンジニアのchiha(@chiha_fukuoka)と申します。福岡出身です。
2020年2月から主にバックエンドを中心とした開発に携わっています。
実は私は…
エンジニアとは言ったものの、実は生物系の学部出身で、成分分析とか化学反応みたいなWebエンジニアリングとは全然関係ないことをやってました。
大学卒業してからプログラミングに興味を持ち、独学からプログラミングスクール的な場所を経て、KAI-YOUに入社しました。
入社して２週間が経過したので、入社までの簡単な経緯と、入社してからのアレコレを振り返っていこうかなと思います。
入社前の経緯
KAI-YOUを知ったのは2019年11月ごろでした。
paizaというエンジニア転職とプログラミングの学習サイトで知り、面白そうな会社だな〜と思って応募しました。
選考の流れとしては面接が2回、その後開発課題の提出。 2回の面接を経て、出された課題は
VagrantまたはDockerで環境構築、CakePHPで任意のTwitterアカウントの画像を取得、保存するアプリを作る 完成したらGitHubリポジトリ のURLを送る
という内容。
CakePHPにVagrantにDocker、どれも触れたことがない。 なんならPHPを書いたこともない。 私は頭を抱えながら、 Google検索の力を借りてなんとか仕様通りに動作するアプリを作りました。 （エンジニアに必要なのは検索力とか言いますが…）
そんなこんなで無事（？）にKAI-YOUの一員として一緒に働かせて頂くことが決まりました。
入社１週目
入社初日は諸々の説明を受けた後に環境構築。 メンターのキャベツこうべ(@cabbagekobe)さんに教えてもらいながら、なんとか構築しました。
以降はKAI-YOU.netのコードをひたすら読んでいました。 実際に動いているサービスのコードを読むのは初めてで、分からないことだらけでしたが、隣のキャベツこうべさんとGoogle検索に助けられながら読み進めました。 未知のコードを読むのって楽しいですね。
ついでにコードリーディングの一環として、社内Slackのゴミ捨て当番通知botの改修をしました。
KAI-YOU新メンバーをゴミ捨てローテーション対象に加え、ゴミ捨て担当の選出をランダム化する機能を実装しました。 人生で初めてのエンジニアとしての実装となったので、botが実際に呟くまでめちゃくちゃドキドキしました（笑）
入社２週目
２週目の最初の仕事は、とある部分の記事表示ロジックの拡張でした。
初のバックエンドの仕事ということで、バックエンドのみで完結する機能拡張。 主にCakePHPのモデルの処理周りに触れていく感じの作業になりました。
元々書いてあるコードを参考にしながら自分なりに新しく処理を書いたのですが、そもそも参考にした処理を使うだけでよかったというオチでした…。 ということで、最初に書いたコードが原型を留めないくらいの修正を経て実装完了となりました。
本番に反映して、仕様が社内に通知されているのを見るとちょっと誇らしくて嬉しかったです。この嬉しさを忘れないようにしたい。
次の仕事は、「投稿記事の管理画面での入力項目の追加」でした。
データベースへのカラム追加や実際の記事データに触るということで、震えながら作業していましたが、こちらも検索とキャベツこうべさんに助けていただいて実装することができました。
現在
入社３週目の現在は、フロントにも触れていこう！ということでJavaScriptを絡めた非同期での処理の実装に取り組んでいます。 なんとかPHP側のAPIができたので、現在JavaScript側での処理を書きはじめました。（絶賛苦戦中です…）
まだまだ知らない事だらけですが、少しずつ身についてきている実感はあるので、これからも頑張っていこうと思います。 （開発者ブログなのに成長日記みたいになってしまった…）
次の記事は開発者ブログらしく、技術的な記事を書けるように精進していこうと思います。
以上！新米エンジニアのchihaでした！
2020年注目のトレンド Neumorphism とは
はじめまして、KAI-YOU開発部デザイナーのPENTAGRAM（@PENTVGRVW）です。
昨年、新卒入社した地元北海道のWeb制作会社を退職し、2020年1月から開発部としてKAI-YOUにおけるサービスのデザインなどをお手伝いさせていただいております。
前職では受託メインでグラフィックデザインやWebデザイン、撮影業務を主に担当していました。個人ではeスポーツ系のイベントや大会を主催したり、その時好きなコンテンツと技術を題材にファンアートを制作してSNSに投下する毎日を送っています（早くLJL始まってほしい）
よければTwitterフォローお願いします
今回は2020年のUIトレンドの中でも賛否両論ありますが、個人的に好きな「Neumorphism（ニューモーフィズム）」というUIをご紹介いたします。
Neumorphismとは
Neumorphismは近年DribbbleやInstagramにおいて注目されている新たなUI手法です。
UIデザインにスキューモーフィズムが採用され始めてからも、フラットデザイン、フラットデザイン2.0、マテリアルデザインなど様々なUI手法がそれぞれの弱点を補う形で生み出されてきましたが、Neumorphismに関してはその限りではありません。なぜならNeumorphismはスキューモーフィズムが持つ「視認性の良さ」というメリットを放棄していると言われているからです。
UIデザインにとって「直感的でない」ことは致命的であり、多くのデザイナーはそれらを理解していると思います。また、実際にプロダクトに反映した事例が少なく、テストの結果が数字として記録されていないことから足踏みしているチームも多いはず。「UIなのに見づらい、分かりづらいってどうなのよ」と思われる方もいらっしゃると思いますが、そんなNeumorphismにもちゃんと良いところはあるのでご安心ください！
見栄えが良い
誤解されがちですがこれは「視認性が悪い」こととはノットイコールであり、そもそも「良い見た目」でないと界隈では流行りません。実用性がまだ見極められていないのにも関わらず、これだけ多くのデザイナーが制作し、投稿しているところを見ると、改めて興味を引くデザインだということがよく分かります。
今までにない立体表現
フラットデザインやマテリアルデザインはシャドウエフェクトを巧みに利用することで、オブジェクトの「浮遊感」を演出し、質感や立体感を表現してきました。その点、Neumorphismはシャドウエフェクトを明暗2つ使い分け、凹凸を表現しています。
制作の都合上、オブジェクトを背景色と同じ色にする必要があるので、コントラスト差がなくボタンやスイッチとしての使い勝手は褒められたものではありませんが、この表現にはそれと天秤に掛けるほどの「真新しさ」があります。
実装コストがそれほど高くない（はず）
シャドウを2つ使うので他の手法より手間がかかりそうな印象ではありますが、Photoshop等で基礎となる明と暗のシャドウを設定した後、スタイルをコピーすることで他のオブジェクトに対しても流用が可能です。
もちろん、若干の微調整は必要になりますがフラットデザインやマテリアルデザインに触れたことのあるデザイナーならそれほど障害にはならないでしょう。
また、実装の際にいくらか検討は必要になりそうですが、有志が作成した（※1）ジェネレーターを利用することである程度の手間は軽減できるかと思います。
非デザイナの方でも気軽に触れるジェネレーター Neumorphism/Soft UI CSS shadow generator
次世代のスタンダードになり得るか
業界的には今のところネガティブな印象が強いNeumorphismですが、将来性は大いにあると考えています。
ある時を境にガラケーからスマートフォンに主流が切り替わったり、iPhone等の液晶画面も年々大きくなっていくことから、デザイントレンドだけでなくそれを取り巻くデバイス（媒体）環境にも変化があるといえます。
2D上ではいまのところ「BAD UI」とされるNeumorphismも、VR技術やGoogleグラスなどが発展することで視覚情報が自然と2Dから3Dに移り変わり、適応していくかもしれません。
Neumorphismは登場したばかり、まだまだ検証されていない要素がたくさんあります。
何事も試してみることが1番だと思うので、ジェネレーターやソフト上で是非1度Neumorphismに触れてみてください！
