岩手県盛岡市に拠点を置く株式会社東日本ソラナの公式サイトは、濃紺を軸にした落ち着いた配色と、写真を大きく使ったセクション構成が特徴のサイトです。太陽光発電システムや蓄電池を扱う会社のサイトでありながら、設備の仕様を前面に押し出すのではなく、施工にあたる人の姿や暮らしの写真を先に見せる組み立てになっています。
この記事では、実際の画面を確認しながら、ファーストビューの分割、配色とタイポグラフィ、セクションの反転レイアウト、問い合わせまでの導線という観点でデザインを分析します。住宅設備や施工を扱うサイトを設計するときの見本として、参考になる点を整理していきます。
岩手県盛岡市から太陽光発電を届けるサイトの全体像
はじめに、サイト全体の構成を確認します。トップページは、当社について、施工メニュー、施工実績、施工の流れ、よくある質問、コンテンツ、会社概要、お問い合わせという順に並び、上から読み進めるだけで会社の輪郭がつかめる並びになっています。
株式会社東日本ソラナは、太陽光発電システムの販売と施工に加えて、蓄電池やV2Hの設置、住まいのリフォームやオール電化の工事まで手がけています。会社概要では対応地域として岩手県全域が示されており、拠点は岩手県盛岡市青山にあります。
下層の当社についてのページでは、2003年の創業から積み上げてきた4,000件を超える施工実績、実際の設備に触れられる体験型のショールーム、エネルギーから住まいのリフォームまでを一社で受けられる体制、メーカーのフランチャイズ加盟店であることの4点が強みとして整理されています。スタッフ紹介では代表取締役の腹子 久人様をはじめ、役職と一言コメントを添えた形で7名が並びます。
ファーストビューは写真と白地の分割で構成されています
トップページを開いてまず目に入るのは、画面の左側およそ3分の2を占める大きな写真と、右側に残された白い面の対比です。全面を写真で覆う手法と比べると画面の重心が左に寄り、右側ではヘッダーの文字が写真に重ならずに読める状態が保たれています。
屋根の上の作業風景を主役にしたキービジュアル
キービジュアルには、太陽光パネルの上にしゃがみ込み、タブレットを手にした作業着姿のスタッフの写真が使われています。完成した設備の写真ではなく作業中の様子を選んでいるため、製品の紹介よりも施工そのものへの姿勢が先に伝わります。
写真は青みを帯びた寒色寄りの色調で、パネルの反射と白い作業着が画面の明るさを支えています。人物の視線と手元が画面の下側へ向いているので、読み手の視線も自然に下へ流れ、続くコピーへとつながります。
写真の下辺には新着情報を知らせる細い帯が重なり、右端には一覧ページへ進むリンクが添えられています。写真の面と白い面の境目にまたがる位置に置かれているため、帯そのものが2つの面をつなぐ役割も担っています。
写真と白地をまたいで置かれた見出しコピー
見出しのコピーは、写真の上から右側の白い面へ横切るように配置されています。写真に重なる部分は明るい色で、白地に重なる部分は濃い色で見えるため、1行の文章が背景に応じて表情を変えながらつながっていきます。
内容は、雪の多い地域でも太陽光の恵みを住まいの力に変えられるという趣旨で、その下には施工実績の件数と地域に根ざした品質を示す短い一文が添えられています。長い説明を置かずに立場だけを示す構成は、専門的な設備を扱うサイトのファーストビューとして参考になります。
上部に連絡先とメニューをまとめたヘッダー
ヘッダーは白を基調にして、左にロゴと社名、右に電話番号と受付の時間帯、続いてお問い合わせのボタンが並びます。区切りには細い縦線を使い、要素どうしの境目を線1本で表しているため、装飾を足さずに情報が整理されています。
右端には三本線のアイコンが置かれ、上部に項目を詰め込みすぎない形が保たれています。写真の右側を白く空けたレイアウトのおかげで濃紺の文字が背景に負けずに読めるので、ヘッダーとファーストビューが連動した設計になっています。
濃紺を基調にした配色と明朝体のタイポグラフィ
このサイトの印象を決めているのは、青の濃淡だけで組み立てられた配色です。色数を絞ったうえで明度の違いによってセクションを区切っているため、写真の色が濁らず、全体としては静かで誠実な印象にまとまっています。
青の濃淡でセクションを区切る配色設計
当社についての節は中間の明度を持つ青紫寄りの面で覆われ、その内側にさらに淡い青灰色のカードが重ねられています。施工メニューと施工実績の節ではほとんど白に近い淡い水色のパネルが使われ、会社概要の節では最も濃い紺が背景になります。
同じ青系のなかで明度を数段階に分けているため、ページを下へ進むにつれて色が濃くなったり薄くなったりするリズムが生まれます。アクセントとして目に入る別の色は、記事のカードに付いた小さなラベルの青緑と、写真のなかの空の青くらいに絞られています。
字間を広くとった明朝体の見出し
各セクションの見出しは、英字の小さなラベルを上に置き、その下に明朝体の日本語見出しを大きく配置する形で統一されています。日本語の見出しは字間が広くとられていて1文字ずつが独立して見えるため、落ち着いた印象と読みやすさが両立しています。
本文はゴシック体で、行間をゆったりとって中央揃えで置かれています。見出しは明朝体、本文と英字ラベルはゴシック体という役割分担がページ全体で崩れないので、どのセクションに移動しても同じ会社のページを読んでいる感覚が保たれます。
左右を入れ替えるセクション構成と情報設計
トップページは、写真の面とテキストのパネルを組み合わせた単位でセクションが積み上げられています。同じ形をそのまま繰り返すのではなく、左右の配置を入れ替えることで単調さを避けている点が、このサイトの情報設計の中心にあります。
写真とパネルを反転させる交互レイアウト
施工メニューの節では、左側に屋根の太陽光パネルと屋外に据えられた機器、そして空を見上げる家族の写真が積まれ、右側にテキストのパネルが置かれています。続く施工実績の節では左右が入れ替わり、左のパネルに対して、右側に作業中の職人や設置後の住宅を写した複数のカットが並びます。
テキストのパネルには細い枠線と、角から斜めに走る薄い帯が入っています。この斜めの帯が直線的なグリッドのなかで唯一の動きになっており、写真の面積が大きくても画面が固くなりすぎない効果を生んでいます。見出しの下には細い横線が引かれ、その端に小さな点を置いた控えめな装飾も添えられています。
1つのセクションに要点とボタンを1つずつ
各セクションのテキストは、見出しと3行程度の説明文、そして詳細ページへ進むボタン1つという構成で統一されています。情報を詰め込まずに要点だけを置き、詳しい内容は下層ページに任せる割り切りが、トップページの見通しの良さにつながっています。
施工の流れとよくある質問の節では、写真の下側に白いカードを重ね、見出しとボタンだけを載せた簡潔な形が採られています。2つを同じ大きさで横に並べているため、どちらが上位ということもなく、同列の入口として扱われていることが伝わります。
会社概要を表組みで整理した信頼情報の見せ方
会社概要の節は、最も濃い紺のパネルに白い文字を載せ、左に項目名、右に内容を置いた表組みでまとめられています。行ごとに細い横線が引かれているので、枠で囲まなくても項目の区切りがはっきりと分かります。
並んでいるのは会社名や所在地のほか、電話番号、受付の時間帯、休みの曜日、そして最寄り駅から車でかかる時間です。初めて訪れた人が確認したい基本情報が1か所にまとまっているため、別のページを探し回らずに済む構成になっています。
問い合わせまでの導線とボタンのUI
導線の設計では、ボタンの見た目を2種類に分けている点が目を引きます。どこを押してほしいかが色と塗りで表現されているため、読者は説明を読まなくても優先度を感じ取れます。
塗りと線で優先度を分けたボタン
当社について、施工メニュー、施工実績の各節では、濃紺で塗りつぶした長方形のボタンが使われています。一方で、施工の流れ、よくある質問、コンテンツの節では、白い面に濃紺の枠線と文字を組み合わせた抜きのボタンが使われています。
角を丸めずに直線的な長方形でそろえているため、2種類のボタンが混在してもトーンが崩れません。文言はいずれも「詳しく見る」に統一されていて、押した先で何が起きるかを迷わせない作りになっています。
電話とメールを並べた問い合わせブロック
ページ下部のお問い合わせの節は、1つの枠を縦線で2つに割り、左に電話、右にメールの入口を配置しています。どちらも上に短い説明を置き、その下に濃紺のボタンを大きく取る形なので、左右の重みがそろって見えます。
電話側のボタンには受話器のアイコンと番号、そして受付の時間帯が添えられ、メール側には封筒のアイコンが添えられています。連絡手段を選べる状態を1画面で見せているため、時間帯によって使い分けたい読者にも配慮された導線になっています。
フッターで全体像に戻れる構造
フッターは淡い水色の面に切り替わり、主要ページへのリンクを1行に並べています。上下に細い横線を引いて帯として区切り、その下に著作権表記を中央に置くだけの簡潔な作りです。
最後まで読み進めた人が、そのまま気になるページへ移動できる状態が保たれています。トップページのセクションの並びとフッターのリンクの並びがおおむね対応しているので、迷わずに目的の情報へ戻れます。
太陽光発電や蓄電池を扱うサイトづくりで参考になる点
ここからは、太陽光発電や蓄電池を検討する読者の視点に立って、このサイトの構成から学べる点を整理します。設備は完成した姿を想像しにくい買い物であるため、サイトに何をどの順番で載せるかが検討の入口を左右します。
実績と流れを別々の入口として用意する意味
施工実績と施工の流れは、どちらも実際にどうなるのかを伝えるページですが、担う役割は異なります。実績は仕上がりの姿と対応してきた範囲を示し、流れは相談から工事の完了までの段取りを示すため、両方がそろって初めて検討の材料になります。
このサイトでは、その2つを別々のセクションとして立て、それぞれに入口を用意しています。よくある質問を並べて置いている点も含めて、疑問を持った段階の読者が自分で確かめられる導線が整えられています。
寒冷地の住まいに向けた情報の置き方
雪の多い地域では、屋根の形状や積もった雪の重み、日照の条件が住まいごとに異なります。そのため、一般的な性能の説明よりも、地域の環境を前提にした施工の考え方を示すほうが、読者の不安に届きやすくなります。
このサイトはファーストビューの一文と当社についての節で、雪の多い土地で取り組んできた姿勢を先に伝えています。設備の仕様を並べる前に立場を示す構成は、地域に根ざして施工を行う会社のサイトが取り入れやすい形です。
まとめ：デザインの見本としての株式会社東日本ソラナ公式サイト
株式会社東日本ソラナの公式サイトは、濃紺を軸にした青の濃淡、写真と白地を分けたファーストビュー、左右を反転させるセクション構成という手法で、落ち着いた印象と読みやすさを両立させています。装飾を増やすのではなく、色数とレイアウトの規則で統一感を作っている点が、住宅設備や施工を扱うサイトの見本になります。
ボタンの塗り分けで優先度を示し、電話とメールを同じ幅で並べ、会社概要を表組みで整理するといった細部の判断も、読者が次の行動を選びやすい状態を支えています。太陽光発電のように検討の期間が長くなりやすい商材を扱うサイトを設計するときは、情報を足す前にどの順番で何を見せるかを決める参考になるはずです。
余白の取り方や写真の切り取り方、色の切り替わるタイミングは、実際の画面で確かめたほうがつかみやすい部分です。デザインの細部が気になった方は、公式サイトで直接ご覧ください。
