一般社団法人 農業農村整備情報総合センター 様の現行サイトに、調査報告書を掲載するページを追加制作いたしました。

▼依頼内容
一般社団法人 農業農村整備情報総合センター 様の現行サイトに「調査研究活動紹介ページ」の追加作成と、その下層の「テーマページ／各詳細ページ」の追加制作のご依頼を受けました。

ご要望としては、新規ページには6つのテーマを配置させ、そこから各ページへ遷移させたいとのことでしたので、テーマごとにイラストを作成し、そこから各PDFの情報一覧を表示できるようにいたしました。各詳細ページも各情報をアイコン付きで表示させることでよりわかりやすくまとめることにしました。

▼デザイン制作担当
今回はイラストの制作もご依頼いただきましたので、社内イラストレーターとテイストについて意見をすり合わせながら、より最適なページ作成を目指しました。

イラスト、アイコン制作　▶︎デザイナー
背景イラスト制作　▶︎イラストレーター
背景とイラストやアイコン等をWebページへ展開　▶︎Webデザイナー

背景イラストを得意とするイラストレーターが背景の描画を担当、併走して人物イラスト、アイコンを別のデザイナーが担当しました。そしてそれらをWebページへ落とし込むUIデザインの作業をWebデザイナーが担当いたしました。

▼イラスト制作
6つのコンテンツを表現するイラストを制作するにあたり、その中の1コンテンツのラフ案を下記2パターン制作し提案いたしました。
イメージ①：フラットで堅めの内容にもフィットするイラスト
イメージ②：カジュアルで少し柔らかめな印象のイラスト
その結果イメージ②の案が採用されました。

▼アイコン制作
6つのコンテンツからさらに細分化した32の調査テーマに紐づいたアイコンを、線の太さやアイコンそれぞれの粒度に注意をしながら制作いたしました。

▼背景イラスト制作
背景イラストのラフ提出時は、上記のイラストイメージ①②案どちらにもマッチするようなテイストを意識しつつ、アイコンが載った際に見づらくならないよう、色味やアイコンの表示の仕方に注意して完成イメージを固めていきました。

クライアント様から「水田が多い方が農村の風景に見えるため、水田が多めのサンプルにしたい」とご要望いただいたため、イラスト内の施設などを減らして水田を多めに描き足し、清書作業をいたしました。

▼UIデザイン
「調査活動研究紹介」ページ内に、新規ページ「情報通信環境整備により解決が期待されるテーマとアイデア」を制作いたしました。前述した6つのテーマのイラストを背景イラストに合わせレイアウトし、各テーマ（ボタン）押下で各詳細ページへ遷移する構造です。各テーマ（ボタン）へホバーすることでボタンエリアがふわっと拡大するインタラクションも仕込みました。
押下後はそれぞれのコンテンツの詳細ページへ遷移し、先ほどのアイコンと調査テーマのPDFが並びます。調査テーマ押下で各PDFページへと遷移いたします。

▼実装
今回のご依頼内容が、組み込み実施を行うクライアントサイトでは新しい取り組みの表示画面でしたので、特にイラストアイコン部分は以下を意識し実装をいたしました。
・アイコンイラストのホバーアニメーション
・アイコンイラストを、レスポンシブ表示含めてページサイズ拡大・縮小の際にも違和感のないサイズ感で表示されるリサイズ処理
・ヘッダー領域のレスポンシブ表示含めてページサイズ拡大・縮小の際にも違和感のない動きで切り替わる実装

一般社団法人 農業農村整備情報総合センター 調査報告書ページ