No.032「凸版印刷」のからくり

No.032 凸版印刷- ワンピースの楽譜 | Webサイト100選

サイト概要
凸版印刷の公式ウェブサイトです。トッパンでは、重点的に取り組むべき成長領域「健康・ライフサイエンス」「教育・文化交流」「都市空間・モビリティ」「エネルギー・食料資源」を設定し、多様化する時代に合わせて、社会のニーズにこたえていくために社会的価値を創造していきます。

No.032 凸版印刷-ワンピースの楽譜 | Webサイト100選

ここが魅力！
・「企業広告」では、TVCMを観られるだけでなく、新聞など様々な媒体に掲載された広告のテーマに関する解説を読むことができる！会社のことだけでなく、「食品ロス」、「超高齢化社会」といったような、一般の人にとっても身近なテーマに関しての取り組み、span class=”bold-red”>新しいテクノロジーについて学ぶことができる！
また、見出しのつけ方などの勉強になる！

No.032 凸版印刷-企業広告-ワンピースの楽譜 | Webサイト100選

・「新卒採用」の「PROJECT STORY」ページでは、身近な商品のプロジェクト裏話を読むことができる！

No.032 凸版印刷-PROJECT STORY-ワンピースの楽譜 | Webサイト100選

構成
・FV、header、nav
【幅750px以上（PC）】

No.032 凸版印刷-FV(750px以上)-ワンピースの楽譜 | Webサイト100選

【幅749px以下（スマホ）】

No.032 凸版印刷-FV(749px以下)-ワンピースの楽譜 | Webサイト100選

→ヒーローヘッダーデザインであり、動画が一面に表示される。映像のつくり、雰囲気はテレビCMとは異なるが、ヒーローヘッダーの動画も、テレビCMでの出演者の台詞にある「凸版のこと、印刷の会社だと思っていませんか？」というように、世間一般のイメージを払拭することを目的としている点が共通していると考える。CMはユーモアや、CMキャラクターに有名人を起用しているため親しみを感じる。その上で、そこから検索した人が本サイトにたどり着き、初めて見るこのヒーローヘッダーデザインの動画は、CMとのギャップを感じるとともに、「かっこいい」、「面白そう」といったようなさらなるプラスの印象を新たに与えると考える。headerのグローバルナビゲーション部分は、マウスをかざすと背景が白くなり、文字が読みやすくなる。また、サブカテゴリが設定されているカテゴリ名にマウスをかざすと、カテゴリ名の色が青くなり、同じ青色の下線も同時に出てくるメガドロップダウンメニューが表示される。
※ページ下部、真ん中の「SCROLL」の文字と記号（│）を配置することで、スクロールできることが分かるようになっているが、ヒーローヘッダーの映像の印象が強いため、それらには気づかずにスクロールする可能性が高いと考える。
言語設定は日本語や中国語、英語の他、スペイン語やドイツ語も選択できる。

拠点が多いことから、headerに「グローバル拠点」リンクをまとめたアイコンを配置しており、マウスをかざすとメガドロップダウンメニューが表示される。国と地域名の左側にはそれぞれ＞の記号を入れている。

No.032 凸版印刷-グローバル拠点-ワンピースの楽譜 | Webサイト100選

画面サイズ幅が749px以下になるとハンバーガーメニューが画面右端からスライド表示される。ハンバーガーメニューを開き、さらにサブカテゴリが設定されているカテゴリ名を押すと、その上に重なるように、右端からサブカテゴリ一覧がスライド表示される。

・footer
【幅750px以上（PC）】

No.032 凸版印刷-footer(750px以上)-ワンピースの楽譜 | Webサイト100選

【幅749px以下（スマホ）】

No.032 凸版印刷-footer(749px以下)-ワンピースの楽譜 | Webサイト100選

→コピーライト表示の上にポリシー関連のロゴをまとめて配置している。
※SNSアイコンのうちの「in」に関しては、初めて見たため、最初はよく分からなかった。アイコンは一見文字だけよりも分かりやすいが、「見たことがある」、「知っている」ものでないとむしろ情報が少ない、押そうとまで思わない可能性があると考える。

使用パーツ・アイコン

バナー

分析・考察
■ターゲット：起業家や就職活動者
[理由]「受賞歴」や「IR情報」から。また、特に「新卒採用」ページのコンテンツが多く、力が入っていると思ったから。

■特徴：
・トップページの「印刷テクノロジーが世界を変えるものがたり」下の4枚の画像の表示画面の左側に、現在何枚目かを表示している（表示している画像の順番の数字の左側の記号が〇から─に変わる）。4枚のデザインが類似しているかつ、一画面に同時に1枚ずつしか表示されないため、分かりやすくなる。
（枚数の順番の数字をp、数字の左側、数字より手前の記号をp::beforeの疑似要素で指定している）

・「新卒採用」では、FVに「Recruit」や「新卒採用」といった言葉ではなく、キャッチコピー（メッセージ）を強調している。また、その部分の画像の文字もあえて崩したデザインにしている。
・「新卒採用」の「BEYOND　トッパンの挑戦」の各ページでは、社員たちの会話の内容の文字起こしと一緒に載せているそのときの様子に関しては、今まで写真のパターンしか見たことがなかったので、動画で載せているのが印象的であった。

No.032 凸版印刷-BEYOND　トッパンの挑戦-ワンピースの楽譜 | Webサイト100選

・文字サイズ：グローバルナビゲーションのカテゴリ名（「OUR STORY」、「企業情報」）は14px。トップページの見出し（「TOPPAN NEWSROOM」、「TOPICS」）は30px。説明文は14px。footerのリンク（「サイトポリシー」、「個人情報保護方針」）は13px。

・フォントの種類は、「Open Sans」や「Roboto」が使用されている。
Open Sansは非常に可読性に優れたフォントであり、Googleが一部のウェブサイトや印刷物、ウェブ広告にOpen Sansを使用している。Robotoは、モバイルのOS(アンドロイド)向けにリリースされたサンセリフ体のフォント。Android端末のデフォルトフォントとして採用されているのに加え、Google MapsやYoutubeでも使用されている。