料理人の顔が見えるレストラン検索・予約サイト「ヒトサラ」の事業チームに参画し、事業フェーズに応じたUXデザインや開発に取り組んでいます。

クライアント
株式会社USEN Media
サービス名
ヒトサラ
担当範囲
UXデザイン/IA/UIデザイン/フロントエンド開発

事業フェーズに合わせてUXデザインからフロント開発までをチームで担当

課題の精査や、ユーザー体験の定義からスタート

プロダクトが抱える課題の整理や優先度付けから着手。クライアントと議論を重ね、リニューアルの要件やスコープを決めていきました。「何のために」「何をすべきか」「どのようにすべきか」をチーム全体で検討するため、デザイナーやエンジニアも数値を見たりUXを考えたりといったことを行います。
アジケでは開発は手段だという価値観があるので、こういった要件整理の段階で目的や目標をきちんと共有することを大切にしています。それを踏まえ、それぞれの担当領域をどのようにしていくのかということをメンバー主体で考え、話し合いながら実行していきます。

ヒトサラのブランドイメージを保ちつつ、
ユーザータイプ別に適切なアプローチができるインターフェースを設計

ヒトサラのターゲットとしてるユーザーは食に対して感心が高く、ターゲットに合わせたコンテンツが豊富にあります。しかし長年の運用で、情報設計やデザインルールが煩雑になっていたため、コンテンツの整理と新しいデザインルールの設計が必要でした。
ユーザータイプ別にUIフローを作成し、各ページで適切なアプローチができるように情報設計を行うことで『ヒトサラらしさ』は残しつつも『機能の使いやすさ』『情報の見やすさ』を重視したUIデザインを行いました。

コーディングレギュレーションの策定

今回フルリニューアルということで、コーディングルールやフロントエンドの実装の進め方を新たに策定しました。
クライアント先のエンジニアと話し合いながら、各機能の実装分掌やJavaScriptライブラリのバージョン、ディレクトリ構造などを取り決めました。
ソース管理にはGitを導入し、プルリクエスト単位で相互コードレビューを行い、書き方の統一化を行いました。

CSS設計手法を取り入れたモジュール先行開発

一貫したデザインルールと運用のしやすさを実現するため、社内のデザイナーと連携しモジュール先行の開発を行いました。最初に汎用的なデザインパーツを洗い出し、パーツをまとめたモジュールページを作成。基本的にはモジュールの組み合わせでページに展開していきました。再利用性の高いCSSを実装するため、設計手法にはBEMを採用しました。

SEOを意識したセマンティックなコーディング

検索結果で優位に立ち、より多くのユーザにコンテンツを届けるため、構造化データを使用したり、要素ごとに適切なHTML5タグでマークアップすることでSEOの内部対策を行いました。今後普及が進むであろうAMP対応も予定しています。

Another projects

事業を開発面から支えています

ウェブ接客ツール「ecコンシェル」

AI(人工知能)を導入し、『サイト分析→接客→自動最適化→効果検証』を高速で回せるWeb接客ツール「ecコンシェル」の開発支援。

料理人の顔が見えるグルメサイト

レストラン検索・予約におけるUX改善CV向上を目的とした抜本的なリニューアル。また事業フェーズに応じたUX/UIデザイン、開発支援。

アジケでは事業を牽引する
エンジニアを募集しています。

ENTRY

アジケのエンジニアと
少し話してみたい方はこちら

Let’s have a chat

Skypeまたは面談

PAGE
TOP