コーポレートカラーを全面に。株式会社スポーツタカハシのwebデザイン

1. コーポレートカラーのレッドを基調にする

スポタカのメインとなるカラーはレッドで、スポーツへの情熱や躍動感などを意味しているようで、「スポタカの赤を全面に使ってほしい」という要望がまずありました。

赤はいろんな意味がありますが「注意」という意味も持ち合わせているため、使い方によってはインパクトが強すぎるカラーでもあります。なのでページ全体に赤を敷きつつ、会社らしさを出すにはどういうデザインが適しているか・・を考えながら制作しました。

2. スマホ、タブレットにも最適化したレスポンシブデザイン

もはや今の時代では当たり前ですが、iPhoneなどのスマホやiPadのようなタブレット端末でもちゃんとサイトが表示されるようにレスポンシブデザインにて制作しました。

1枚のwebページをモニターのサイズによって表示を変えていくように制作していくので、1ページにつき3種類のデザインをつくるようなものです。今はだいぶ慣れましたが、PCの表示だけ考えていればよかった時代に比べると、やはり手間はかかります。

ですが、誰がどのデバイスでwebサイトにアクセスするのかわからない時代なので、いろんなサイズのモニター表示に対応するのは必須です。あるモニターではちゃんとサイトが表示されるのにこのモニターではレイアウトがおかしくなっている・・というのは、クライアントさまの信用にも関わりますからね。

3. webフォントを2種類使い分ける

いまは画像を使わずともいろんなフォントをwebでも使えるようになりました。

フォントを提供している企業はいくつかあって、googleもそうですがグラフィックソフトを提供しているAdobe（アドビ）もwebフォントを開発するようなりました。個人的にAdobeのほうがwebフォントのクオリティは高いですね。

そして、表示させるフォントサイズによって同じフォントでも見え方も変わります。大きく表示させた場合にちょっとこのフォントじゃないほうがいいな・・と思うこともしばしば。今回のwebサイトでもタイトルのフォントはもっとクールなフォントにしたかったので見出しのフォントのみ違うwebフォントを使いました。

画像ではあんまりわからないかもしれないですが、ボクにとっては全然違うんです（笑）。こういう細かなこだわりもしっかり入れてサイトのクオリティ向上を図るのもBUROKI designがつくるwebサイトの特徴です。

4. スクロールで動きのあるページに

株式会社スポーツタカハシさんはスポーツに関わる会社なので、ボクがwebサイトを制作していく際に意識していたキーワードの「躍動感」。その躍動感をページを見る人に伝えるにはどうしたらいいか・・そのひとつの手段がスクロールでテキストや画像が表示されていくアクションだと考え、各ページの要所要所にアクションを加えました。

ただ、このアクションもやりすぎると煩わしいものになってしまうので、さじ加減が必要ではあると思います。アクションを設定する際にボクが気をつけているのは「距離」です。表示されていないものを表示させるまでの距離。ここが長いとすごく不自然に感じるし、ページをスクロールする速度が速い人ほどテキスト内容に気づかないという弊害も起こってしまいます。

ページにアクションをつけるとそれだけで目をひいてインパクトを与えることができますが、バランスは気をつけたいですね。

5. デザイン、コーディング、wordpress構築すべて対応

ボクは基本的にwebサイト制作にまつわる工程はすべて自分で手がけるようにしています。それは細かい部分の対応や修正がスピーディにできるし、それを一番わかっているのもボクだからです。

一貫して対応することで制作に関するズレを生まないので個人的にはやりやすいです。もちろんwordpressにてwebサイトを構築し、サイト公開後に先方のスタッフさんでも比較的容易に修正・更新できるようにサイト設計しています。

webサイトは外観の見栄えだけでなく、更新のしやすさや画像ファイルがどこにあるのかなどのフォルダ構成もかなり重要です。サイトを見るだけではわからない部分の「インナーデザイン」ですね。人間の筋肉と同じイメージです（笑）。