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年間様々な媒体のデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ブログをご覧いただきどうもありがとうございます。他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

スポンサーリンク

スポンサーリンク

design list

デザイン作品一覧

graphic

グラフを活用した見せ方を。データ提供サービスのフライヤーデザイン

2017年に取引先さまの営業担当者向けにエンジニアたちが開発したデータサービスのフライヤーデザインです。フライヤーの現物は持ち合わせていないの…

2020.01.25.

graphic

クラフト用紙の風合いを生かしておしゃれに差をつける名刺デザイン

この名刺は前職にいた頃に自社用に制作したクラフト用紙を採用した名刺デザインです。確か2015年から2018年の春ごろまで使用していたと思います。 1…

2020.01.17.

graphic

【2020年の年賀状】懐かしのキャラクターをモチーフに制作したパロディステッカー...

改めまして、明けましておめでとうございます(何回言うねん)。本年もBUROKI designをどうぞよろしくお願い申し上げます。 本来なら2019年中にお世…

2020.01.09.

web

常に新しさを追求し続ける。美容室「SOURCE -hair atelier-」の...

2019年最後の制作実績は、今月頭に公開した美容室「SOURCE -hair atelier-(ソース ヘアアトリエ)」さんのwebサイトデザインです。 前職の後輩から…

2019.12.30.

graphic

「犬」の漢字で2018年を表現した年賀状ステッカーデザイン

この時期になると年賀状をどうするか、考えものですね・・ 年賀状なんてもう古い、LINEでじゅうぶんといわれる現代ですが、今年お世話になったクライ…

2019.12.17.

web

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

ボクがフリーランスになってから一緒にお仕事させていただいている大阪のスポーツ用品店・SPOTAKA(スポタカ)を運営する会社「株式会社スポーツタカ…

2019.12.07.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル