DESIGN IT YOURSELF.

BUROKI


top

design

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

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

web

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

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

2019.12.07.

スポンサーリンク

スポンサーリンク

ボクがフリーランスになってから一緒にお仕事させていただいている大阪のスポーツ用品店・SPOTAKA(スポタカ)を運営する会社「株式会社スポーツタカハシ」のコーポレートサイトが少し前に公開になりました。

こちらのコーポレートサイトは11月より制作していて、webサイトの構成や要望は事前にいただいていたので、ボクが手掛けたのは下記の項目です。

production list

制作リスト

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

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

スポタカのコーポレートカラーのレッドを全面に使う

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

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

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

事業概要ページのスマホ画面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

株式会社スポーツタカハシのwebサイトはこちらから

ヒストリーページのスマホ画面

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。

今回のコーポレートサイト制作では「コーポレートカラーを全面に使う」「何をやっている会社なのか」という点を意識し、比較的にスタンダードなページ構成で制作しました。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

logo

お世話になった職場へ。コーヒーパッケージに使用したロゴデザイン

先日、instagramよりご依頼いただいたこちらの制作案件。 「いま働いている職場を退職するので、お世話になった職場の人たちにオリジナルのコーヒー…

2023.08.16.

graphic

テンプレートとしてつくる。宅麺.comのリーフレットデザインリニューアル

以前コーポレートサイトを制作させていただいた「宅麺.com(ドットコム)」でお馴染みのグルメイノベーション株式会社さま。 宅麺.comでおなじみのグ…

2023.05.24.

goods

裏面でインスタに誘導する。ナノナノファクトリーさんのステッカーデザイン

少し前に制作させてもらったのぼり刃物店さんのステッカーと缶バッジのデザイン。 創業52周年。のぼり刃物店さんのオリジナル缶バッジとステッカーデ…

2023.05.08.

goods

創業52周年。のぼり刃物店さんのオリジナル缶バッジとステッカーデザイン

本日4月1日は、いつもお世話になっているのぼり刃物店さんが創業52周年を迎えられます。 今年も昨年に引き続き、52周年記念の缶バッジとステッカーの…

2023.04.01.

web

1枚のページに集約してシンプルに。Lino Realty株式会社のコーポレートサ...

大阪市西区で不動産の売買や賃貸業を営んでいるLino Realty株式会社さまのコーポレートサイトを制作しました。 Lino Realty株式会社さまは創業されて…

2023.03.25.

graphic

2023年は卯年。ミッフィーをパロディした年賀状デザイン

少し遅めではあるのですが、2023年も年賀状デザインを制作させていただきました。 BUROKI design的に新年の制作といえば、福岡の木工集団「ナノナノ…

2023.01.27.

designをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル