不動産と福祉、二つの事業を展開する株式会社ウエルズリッチ様のコーポレートサイトのリニューアルに、アシスタントデザイナーとして携わらせていただきました。

ディレクション、アートディレクション、コピー、PCデザインはもう一人のデザイナーが担当し、私はそのデザインをFigmaに落とし込み、スマホ版や仕様書を制作しました。

ここではデザイン着手後を中心に振り返ります。また、本サイトはウェブアクセシビリティの達成にも取り組みましたので、後ほど触れたいと思います。
（ヒアリングからワイヤーフレーム制作の過程が気になる方はこちらをどうぞ）

私は、もう一人のデザイナーが制作したIllustratorのデザイン（PC版）をFigmaに起こしていきました。Illustratorのデザイン時点でも十分綺麗に整っているのですが、「Figma（Webサイトやアプリ制作に特化したデザインツール）」を使うことで、実装するエンジニアにスムーズに連携することができます。
デザインをエンジニアに伝えるため、色やフォントの定義、動きのイメージ等をまとめた仕様書も作成しました。

特にスクロールに連動させた動きについては、参考サイトを貼って伝えたり、コマ送りのようなデザインを共有し、細かい調整は実装後にエンジニアと擦り合わせしていくという流れで進めていきました。

スマホのデザインについても、Figmaのアプリを使い、デザインを実機で確認（ミラーリングという機能）し、文字のサイズ感は適切か、アイコンやテキストなどのリンク要素が指でタップできるかなどを実際にスマホで触りながら調整していきました。

ウエルズリッチ様は福祉事業にも取り組んでおられることから、本サイトは全てのユーザーが情報にアクセスできるようウェブアクセシビリティを導入しています。
ちなみにウェブアクセシビリティとは、以下のような状態をいいます。（参照元）

• 目が見えなくても情報が伝わる・操作できること

• キーボードだけで操作できること

• 一部の色が区別できなくても情報が欠けないこと

• 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること

具体的には、デジタル庁が策定したウェブアクセシビリティ導入ガイドブックとチェックリストを元に、達成基準を満たしているかデザインと実装面の両方で確認を行いました。実際にTabキーだけで操作してみたり、スクリーンリーダー（画面読み上げソフト）を使って読み上げ、サイトの情報が伝わるかを確認しました。

本サイトでは適合レベルA（最低限満たすべき基準）を達成しています。

やってみて感じたのは、レベルAAを目指すとなると思った以上にデザイン面に制約が出てくるということ。今回のリニューアルの目的は、「事業拡大に伴ってこれからのウェルズリッチのコンテンツや理念を表現すること」です。レベルAAを目指すより理念を伝えるサイトに軸を置き、そのために必要なデザインかどうかを再確認した上でレベルAに留めました。
アクセシビリティの面からデザインを考えることは、一部のユーザーを置いてきぼりにしないことはもちろん、なぜこのデザインが必要なのか、コンセプトと意図を持った上でデザインしているか、説明できるか、それらの重要性をあらためて感じた機会となりました。

見た目だけでなく、MVV（ミッション・ビジョン・バリュー）の策定から提案していくデザイン、その背景や考え方のプロセスを目の当たりにしながら完成まで参加させていただき、大変光栄でやりがいのあるお仕事でした。
ありがとうございました！

「デザインのことはよくわからないのでどう頼んでいいのかわからない」
「依頼の内容がうまくまとまらない」

そのような場合も一緒に考えながら提案していきます。
お気軽にご相談ください。