#1日1サイトレビュー【053】岩手銀行さん

岩手銀行

堅苦しく感じない工夫が多くされていました✨

【概要】
銀行のwebサイト

【ターゲット】
岩手県内の方で銀行を探している10～20代
岩手銀行で口座を開設している方

【目的】
口座開設してもらう。
インターネットバンキングや資産運用・ローン商品の認知度上昇、利用につなげる。

【印象】
穏やか、やわらかい、ポップ

【メインビジュアル】

・岩手銀行のテーマカラーが緑のため、サイトも緑色をメインカラーとしている。

・メイン画像はドラッグまたは時間経過により次の画像へと変わる。よくある画像の数などの表示はない。

・要素をほとんど角丸にしている。イメージキャラクターが20代ののんちゃん（かわいい😭❤）であることや、10～20代へ口座開設を勧めているので、若者に反応が良いデザインにしていると推測。
丸っこいデザインは取っつきやすく、柔らかい雰囲気がでるので若者にも反応が良いと思う。

・個人の方と法人の方とでログインボタン部分は色を分けて、見分けやすくされていた。

・ボタンや左側のヘッダーなど、緑べた塗りではなくグラデーションになっている。フラットデザインが主流な一方、グラデーションが使われることも増えてきているらしい。（調べてみると、2色までのグラデーションなら”ダサく”感じないようです。）
このグラデーションはCSSでできていました…！

.header{
　　　background: linear-gradient(137deg, #4cce83  20%, #37ba81  50%, #239d78  100%);
　　　background-image: linear-gradient(137deg, rgb(76, 206, 131) 20%, rgb(55, 186, 129) 50%, rgb(35, 157, 120) 100%);
}

■グラデーションに角度をつける
0deg ：下から上への垂直グラデーション
90deg ：左から右への水平グラデーション

つまり137degを指定すると左上から右下へのグラデーションになる。

また、％を指定することで色が変わる位置を変えられる。
background: linear-gradient(137deg, #4cce83 20%, #37ba81 50%, #239d78 100%);
→20％位置までは#4cce83でべた塗り、50％位置が#37ba81になるようにグラデーション、終了位置（100％）が#239d78になるようにグラデーション。

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN

CSSのグラデーション（linear-gradient）の使い方を総まとめ！

勉強させていただいたサイト様です。とても分かりやすいのでお勧め。ありがとうございます！！！

・ナビゲーションメニューの横のハンバーガーボタンを押すとメニューが開く。上から流れるように表示される、スピードがちょうどいい。
どのメニュー内にどのコンテンツが入っているのか分かりやすい。

【コンテンツ】

うまくスクショがとれていませんが、メインビジュアルの左側にあったヘッダーが、スクロール時追従してきます。

・お知らせ部分等テキストを読んでもらう必要のある部分は背景色が白色になっている。特に注意してもらう事項は文字色がオレンジ色で目立つ。緑とオレンジ色は反対色くらいの位置かな？調和しつつ、目立たせることができる。

・セクションタイトルは左寄せ、縦線＋タイトル名で統一。

・テキストだけの部分は少なく、ほとんどがイラストや写真とセットになっている。直感的に内容を伝えられるのでユーザーにとって利用しやすい。

・ボタンにマウスホバーすると影がつく。カーソルが乗ったことが分かりやすい。

・「ニュースリリース」「お知らせ」「IR情報」部分は、おそらく特にアピールしたい部分ではないので文字も細かったりと控えめなデザイン。アピールしたい部分が目立っている。

・「店舗・Webで相談する」は目立たせたい部分のためか背景にボーダーがついている。

【カラー】
銀行は堅いイメージだけど、明るめの緑色をメインに使うことによって柔らかい印象になる。
明るすぎないゴールドなので上品に感じる。

メインカラー：緑
サブカラー：金
アクセントカラー：オレンジ
文字：黒

【フォント】
游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, Arial, Helvetica, Verdana, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic";

メインのターゲットがおそらく若年層なので、柔らかい雰囲気になるようゴシック体を使っている。

【レスポンシブ】
・ハンバーガーメニューやアコーディオンメニュー、タブによる表示の切り替えを多く取り入れることですっきりとまとまっている。