【day56】ACSL | 株式会社自律制御システム研究所 #1日1サイトレビュー

国産産業用ドローンのACSL | 株式会社ＡＣＳＬ

【概要】
郵送物流・インフラ点検・防災災害対応・エマージングユースケースなど、産業用として活躍するドローンを開発し社会への実装を行っている会社のコーポレートサイト

【選んだ理由】
・要素の重なりやホバーした時のモーションのデザインがかっこいい
・コーポレートサイトのレビューが少ない
→スタイリッシュ、スマートな印象を抱かせるコーポレートサイトの要素を分析

【参考になるデザイン（PC）】
・ファーストビューは全面画像に、ドローンやキャッチコピー、グローバルナビゲーションメニューなどが重なっているデザイン
→ソリューションごとに、ドローンが消えてからふわっとスライドが切り替わる
→絵本みたいな没入感がある
・グロナビや「VIEW ALL」などのリンクは、ホバーすると一文字ずつ上下に動くアニメーション
・ニュースなどのリストリンクは、ホバーすると文字色が青色、下線は右向きに青色に色づく
→ホバーしたときのアニメーションはシュッと早い＝スタイリッシュ、スピーディ、真面目な印象を与える
・「OUR SOLUTIONS」では、ソリューションごとにイラストをホバーするとエリアの背景にソリューションにあったイラストに変化する
→エリアの右上にはソリューションの文章が一文字ずつ表示されるアニメーション
→イラストは余分な色は使用されておらず青色一色の線画で、CADとか設計図っぽい
・「OUR BUSINESS」では、強みによって自動で写真と文字が切り替わる
・アイコンはSVGで表現
→複雑なアニメーションとして扱えているサイト（サイトとして技術力に対して信頼感マシマシ！）
・「OUR SOLUTIONS」と「OUR BUSINESS」のページでは、フッター上に双方のページへのリンクが配置されている
→写真と文字の間に透過された青色がひかれているデザイン
→他の写真要素も同じようなデザインの部分あり
→メインカラーで統一感あり
・「NEWS RELEASE」以外の各ページには、CONTENTSリンクとしてページ内リンクを配置
・スクロールしたときの固定リンクの右端に問いあわせリンクがメインカラーの背景、アイコンが表現
・どのページも縦のガイドがそろっている、、、レイアウトが整っていてきっちり、真面目な印象がある
→英字が角があるブロック体が、雰囲気を壊さず、少しアクセントになっている
・見出し以外のフォントサイズは小さめ
→同じ色で、フォントの太さを変えたり、細いボーダーで情報を整理できている（きれい、、！）

【目的】
・会社情報を知ってもらう
・自社の商品を知ってもらう
・会社のニュースを知ってもらう
・採用情報を見てもらう、応募してもらう
・サイトをみて問い合わせをしてもらう

【フォント】
英語：Rajdhani（Google Fonts）
→ゲームっぽい、親しみやすいゴシック体
日本語：游ゴシック

【カラー】
フォント：101112（グレーっぽい黒）、fff
メインカラー、フォント：3455fc（蛍光ブルー）
サブカラー：0af0f2（蛍光水色）

【レスポンシブ（SP）】
・グロナビはシンプルなハンバーガーメニュー
・フッターはメニューごとにアコーディオンメニューになっている
→メニューを開閉するときの「＋」のアイコンはシュピピッと早いスピードで回転するアニメーションで、他のアニメーションとマッチ

【感想まとめ】
・コントラストが高く鮮明な写真が多く使われている＝キリッとした印象を与える
・ホバーしたときや自動スライドのアニメーションのスピードが早くてスタイリッシュなサイトのイメージとあっている
・ホバーしたときにリンクが一文字ずつ動くアニメーションが繊細＆知的さがあってかっこいい！
・写真素材の重なりと、フレア？の表現が奥行きを感じる
・コーポレートサイトはページ数も多いし、詰まってるデザインがモリモリでレビューはページを分けたほうが良いかも、、

※スクショ写真はうまく撮れなかったので省略、、><