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

いま大注目の3ピースバンド「RINGO TONE」さんのロゴデザイン

昨年末にあるミュージシャンの方からロゴデザインの依頼がありました。「RINGO TONE(リンゴトーン)」という、2013年に結成し、東京で活動されてい…

2021.01.23.

graphic

2021年は丑年。牛乳石鹸をパロディした年賀状デザイン

昨年はwebサイトやロゴ、名刺を制作させてくださった福岡の木工集団ナノナノファクトリーさん。 昨年の11月ごろに2021年の年賀状デザインのご依頼も…

2021.01.07.

logo

漢字をモチーフにシンボルマークを考案したロゴデザイン

先月頭にご依頼をいただき、制作させていただいたワインバーのロゴデザインです。 見慣れない「驀(ばく)」という漢字をシンボルマークとして落とし…

2020.12.26.

graphic

デザイナーと謹賀新年のコラボ!?なタイポグラフィデザイン

今年も喪中なので年賀状の制作などはやらないのですが・・。 このwebサイトやSNSなどにちょっとした新年のご挨拶用に何か簡単なマークでもつくろうか…

2020.12.18.

logo

来年春にオープンする美容室「salon de chin」のロゴデザイン

数年前に通っていた美容室でボクのカットを担当してくださっていた美容師さんが、来年の春に独立されるとのことで制作させていただいたロゴデザイン…

2020.12.08.

logo

梅田ディアモールで開催されたDIA CONNECT(ディアコネクト)のロゴデザイ...

2018年の6月ごろのことですが、ハンドメイドのアクセサリーブランドたちの展示・販売イベントが梅田のディアモールで開催されました。 そのイベント…

2020.11.28.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル