今回分析最終回ということで自社サイトを分析してみました。裏エピソードなども盛り込みながら、自社サイトについて語りたいと思います！

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。（自社サイトのデザインは別のスタッフが行っているので、制作のデザイナーの意図が違う場合がございます。）

デザイン分析元の基本情報

商品の特徴：デザイン会社ナップのコーポレートサイト
#KNAP #小山 #デザイン会社 #Webデザイン #白黒 #シンプル
URL：https://knap.jp/
企業名：株式会社ナップ

トップページ

モノクロのトーンで作られつつ、ハードルが高くなり過ぎないよう文字やイラストでKNAPらしさを表現しています。

-ファーストビュー

白黒をテーマにしたデザインで写真の服や、使用するアイテムなど極力白・黒で統一して作成しています。こちらのオセロも元々は茶色だったのですがすべて塗り直して、素材づくりからこだわったファーストビューになっています。
リロードすると映像が変わり、コンセプト重視のオセロverと社内の雰囲気が分かるスタッフverで２つ見れます。

デジタルとアナログの間
「ようこそ！デザイン会社ナップです。」も昔の「ようこそ！あなたは0000番目のお客様です。」みたいなWebらしい表現がされています。それに対して下記のコンテンツ部分では、紙っぽい２段組を使うなどデジタルとアナログの間の気持ちいいデザインがされているなという印象でした。

-コンテンツ

スクロール量に応じて標高の高さをイメージしてる数値を入れたり、言葉にデザイントレッキングなどを使用したりナップ（小山という意味）が至るところで表現されており個性を引き出しています。

画像を少しずらしつつ、ダイナミックなレイアウトにしており、モックを使うことでWeb、紙、パッケージ等いろんな媒体でも統一感がある様に見せています。

デザインはおしゃれで、コンテンツが緩かったり遊び心があるのがKNAPらしさが出ています。社員が見れることで、会社の雰囲気が伝わります。

社歌はくせ強めなのがKNAPスタイルです。

イラスト

一番下の挿絵は実は社員になっているのですが、ページごとにイラストが違うんです。前のWebサイトでもシメにイラストを使用しており、前回のDNAも引き継いでいる部分になります。

-共通箇所（フッター）

Equipmentは使っているものに感謝を込めて入れています。デザインだけでなく、映像や写真撮影も行っているので、いろんなツールが記載されていますがここまで入れている会社は珍しいかも知れません。
serviceはSEO対策で入れていたりもします。上の文字がシンプルで少ない分フッターでは少し文字を多めにしています。

スマホデザイン（レスポンシブ）

CreativeとMaterial部分では、PCではスライドだったものをSPでは１枚ずつにするなどの工夫をして見やすく作成されています。SPも意識しつつ、アクセスを見るとBtoBでPCも多いのでPCサイトもかなりこだわって作っています。

下層ページ

-Worksページ

Webサイトが多いので、縦でも見やすいレイアウトになっています。一覧同様URLや２段組などここも全体的に統一感が出るようにデザインされています。ファーストビューにモックを使っていますが一覧の流用でないのも細かい気遣いを感じます。

-Member

それぞれ好きなものやその人を象徴するような物が入っています。服も白黒にしています。社長が一番上でなく、下にいるのも社員１人１人が引き立つ工夫です。

［裏話！］
すごく天気のいい日に取ったので眩しかったので少し険しい顔になっているという裏エピソードもあったり！白黒で撮影できるようロケハンも何日も探しまくりました。

-About

沿革という硬い会社ではないので、「カレー屋の香りが漂う中、会社設立」や「おしゃれ物件は使い勝手が悪く」などの後悔まで書かれているのが弊社らしいゆるさを感じました。

写真

素材から作る制作会社ということを伝わる写真・動画を使用。白黒の本、やカラーサンプルなど白黒のものを使用し、実は服装も皆白黒！1つ1つの素材を撮影をちゃんと撮影して作っています。PC内に写っている三角のマークまでこの写真のために作成するなど素材づくりにもこだわっています。

［裏話！］
この日はみんな白黒の服の出社で少し面白かったです。

フォント

英語の見出しはAcumin Pro、テキスト部分はDNP 秀英角ゴシック銀 Stdを使っています。メインビジュアルやWORKのタイトル部分ではProfessorでを使うことで特徴的になっています。

日本語デバイスフォント：DNP 秀英角ゴシック銀 Std
英語：Professor / Acumin Pro 
フォントのカラー：＃000000

フォントの説明
ProfessorはAdobeフォントから使用することができます。Weightが太めの手書きフォントで、見出しやタイトルに使えばWebサイトの表情を変えてくれます。

カラースキーム分析

白と黒で配色されています。写真においては白黒で成り立つよう構成したり、人物写真も光を感じる撮り方をしているので白のイメージが出ています。WORKの実績紹介の背景は薄いグレーで統一しています。

ファビコン

OG画像

タイトル

デザイン会社 - KNAP Webデザイン - 東京（恵比寿）

株式会社ナップ（KNAP inc.） 東京、恵比寿のデザイン会社。Webデザイン・Webサイト制作などの制作業務、印刷物のデザインから、ブランディング・企画立案なども行います。

KNAP SNS紹介！

KNAPツイッター
KNAPの最新情報がGETできます！

KNAP Instagram
素敵なイラストがたくさん。最近毎日更新されているので、是非チェックしてみてください。

KNAP NOTE
分析してみた以外にも色々なマガジンを運営しているのでぜひ見てみてください！

この記事を書いているメンバーが働いている会社
よかったら見に来てください！