コーポレートカラーを全面に。designtopaboutdesignblogfilmscassettecontacttopaboutdesignblogfilmscassettecontact↑topdesigntopdesignコーポレートカラーを全面に。株式会社スポーツタカハシのwebデザインwebtopdesignコーポレートカラーを全面に。株式会社スポーツタカハシのwebデザインコーポレートカラーを全面に。株式会社スポーツタカハシのwebデザイン2019.12.07.スポンサーリンクスポンサーリンクボクがフリーランスになってから一緒にお仕事させていただいている大阪のスポーツ用品店・SPOTAKA(スポタカ)を運営する会社「株式会社スポーツタカハシ」のコーポレートサイトが少し前に公開になりました。こちらのコーポレートサイトは11月より制作していて、webサイトの構成や要望は事前にいただいていたので、ボクが手掛けたのは下記の項目です。コーポレートカラーのレッドを基調にするスポタカのメインとなるカラーはレッドで、スポーツへの情熱や躍動感などを意味しているようで、「スポタカの赤を全面に使ってほしい」という要望がまずありました。赤はいろんな意味がありますが「注意」という意味も持ち合わせているため、使い方によってはインパクトが強すぎるカラーでもあります。ページ全体に赤を敷きつつ、会社らしさを出すにはどういうデザインが適しているか・・を考えながら制作しました。スマホ、タブレットにも最適化したレスポンシブデザインもはや今の時代では当たり前ですが、iPhoneなどのスマホやiPadのようなタブレット端末でもちゃんとサイトが表示されるようにレスポンシブデザインにて制作しました。1枚のwebページをモニターのサイズによって表示を変えていくように制作していくので、1ページにつき3種類のデザインをつくるようなものです。今はだいぶ慣れましたが、PCの表示だけ考えていればよかった時代に比べると、やはり手間はかかります。誰がどのデバイスでwebサイトにアクセスするのかわからない時代なので、いろんなサイズのモニター表示に対応するのは必須です。あるモニターではちゃんとサイトが表示されるのにこのモニターではレイアウトがおかしくなっている・・というのは、クライアントさまの信用にも関わりますからね。webフォントを2種類使い分けるいまは画像を使わずともいろんなフォントをwebでも使えるようになりました。フォントを提供している企業はいくつかあって、googleもそうですがグラフィックソフトを提供しているAdobe(アドビ)もwebフォントを開発するようなりました。個人的にAdobeのほうがwebフォントのクオリティは高いですね。表示させるフォントサイズによって同じフォントでも見え方も変わります。大きく表示させた場合にちょっとこのフォントじゃないほうがいいな・・と思うこともしばしば。今回のwebサイトでもタイトルのフォントはもっとクールなフォントにしたかったので見出しのフォントのみ違うwebフォントを使いました。画像ではあんまりわからないかもしれないですが、ボクにとっては全然違うんです(笑)。designがつくるwebサイトの特徴です。スクロールで動きのあるページに株式会社スポーツタカハシさんはスポーツに関わる会社なので、ボクがwebサイトを制作していく際に意識していたキーワードの「躍動感」。その躍動感をページを見る人に伝えるにはどうしたらいいか・・そのひとつの手段がスクロールでテキストや画像が表示されていくアクションだと考え、各ページの要所要所にアクションを加えました。このアクションもやりすぎると煩わしいものになってしまうので、さじ加減が必要ではあると思います。アクションを設定する際にボクが気をつけているのは「距離」です。表示されていないものを表示させるまでの距離。ここが長いとすごく不自然に感じるし、ページをスクロールする速度が速い人ほどテキスト内容に気づかないという弊害も起こってしまいます。ページにアクションをつけるとそれだけで目をひいてインパクトを与えることができますが、バランスは気をつけたいですね。デザイン、コーディング、wordpress構築すべて対応ボクは基本的にwebサイト制作にまつわる工程はすべて自分で手がけるようにしています。それは細かい部分の対応や修正がスピーディにできるし、それを一番わかっているのもボクだからです。一貫して対応することで制作に関するズレを生まないので個人的にはやりやすいです。wordpressにてwebサイトを構築し、サイト公開後に先方のスタッフさんでも比較的容易に修正・更新できるようにサイト設計しています。webサイトは外観の見栄えだけでなく、更新のしやすさや画像ファイルがどこにあるのかなどのフォルダ構成もかなり重要です。サイトを見るだけではわからない部分の「インナーデザイン」ですね。人間の筋肉と同じイメージです(笑)。株式会社スポーツタカハシのwebサイトはこちらから実際のサイトは下記のリンクよりご覧ください。※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。株式会社スポーツタカハシのwebサイトへ今回のコーポレートサイト制作では「コーポレートカラーを全面に使う」「何をやっている会社なのか」という点を意識し、比較的にスタンダードなページ構成で制作しました。ブログをご覧いただきどうもありがとうございます。ベンチャー企業のインハウスデザイナーとして11年間様々な媒体のデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。ブログをご覧いただきどうもありがとうございます。他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。moredesignグラフを活用した見せ方を。moreblog賃貸でもDIYできる。more数字を使ってユニークに見せる。moreタイポグラフィを載せてシンプルな名刺に。more人の写真でストーリー仕立てに。more罫線をうまく使って洗練された印象に。more数字を使ってユニークに見せる。moreタイポグラフィを載せてシンプルな名刺に。more人の写真でストーリー仕立てに。more罫線をうまく使って洗練された印象に。listデザイン作品一覧websiteLPlogoflyertshirtscardslideicongraphicグラフを活用した見せ方を。データ提供サービスのフライヤーデザイン2017年に取引先さまの営業担当者向けにエンジニアたちが開発したデータサービスのフライヤーデザインです。more2020.01.25.graphicクラフト用紙の風合いを生かしておしゃれに差をつける名刺デザインこの名刺は前職にいた頃に自社用に制作したクラフト用紙を採用した名刺デザインです。2015年から2018年の春ごろまで使用していたと思います。more2020.01.17.graphic【2020年の年賀状】懐かしのキャラクターをモチーフに制作したパロディステッカー...改めまして、明けましておめでとうございます(何回言うねん)。designをどうぞよろしくお願い申し上げます。more2020.01.09.web常に新しさを追求し続ける。ヘアアトリエ)」さんのwebサイトデザインです。more2019.12.17.webコーポレートカラーを全面に。(1)制作のご相談・お問い合わせはフォームからデザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。問い合わせフォームはこちらBUROKI(ブロキ)大阪でweb・グラフィックデザイナーとして活動しています。design」としてフリーランスになりました。日々の制作活動の合間にデザインのこと、作品のこと、プライベートのことなどブログで発信しています。thingデザインのことfavorite好きなことprivateプライベートthinkブロキ的考えfilms制作動画travel旅行シリーズ動画vlogビデオログcassetteカセットテープtapeテープplayerプレーヤーcontactお問い合わせsnsソーシャルinstagramインスタグラムyoutube専用チャンネル。