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

デザイン作品一覧

graphic

学校法人様向けに制作した展示会用A1ポスターデザイン

制作したのは2013年ごろだったと思いますが、今でもボクが「いいデザインしたな」と思えるポスターデザインを久しぶりに発掘したので制作実績として…

2021.04.17.

goods

のぼり刃物店さんの手ぬぐいデザイン。職人さんが使うことを想定して制作しました

少し前にのぼり刃物店さんの50周年ロゴデザインを紹介しました。 創業50周年を祝う。のぼり刃物店さんの周年ロゴデザイン この時にステッカーを制作…

2021.04.07.

graphic

トンマナを意識し明るい印象を与える。TBSラジオさんの媒体資料デザイン

日本で一番リスナーが多いラジオ局である「TBSラジオ」さん。 おそらく名前を聞いたことがないという人はほとんどいないと思います。 そんなTBSラジ…

2021.04.03.

logo

創業50周年を祝う。のぼり刃物店さんの周年ロゴデザイン

昨年はECサイトを制作させていただき、2019年にフリーランスになってからいろんな制作物をお任せくださっている「のぼり刃物店」さん。 のぼり刃物店…

2021.03.28.

graphic

よりオリジナリティを引き立てる。ビスケット風タイポグラフィデザイン

先日実績として紹介させてもらった「びすけっと保育園」のwebサイト。 梅田ディアモールで開催されたDIA CONNECT(ディアコネクト)のロゴデザイン w…

2021.03.06.

web

やわらかい雰囲気で伝える。びすけっと保育園のwebデザイン

2021年の一番はじめのwebサイト制作実績となります。 昨年末にお話をいただき、2月10日に無事公開となった「企業主導型保育園 びすけっと東戸塚」。…

2021.02.26.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル