DESIGN IT YOURSELF.

BUROKI


top

design

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

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

graphic

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

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

2021.03.06.

スポンサーリンク

スポンサーリンク

先日実績として紹介させてもらった「びすけっと保育園」のwebサイト。

webサイトをつくっていくにあたって、webページ制作には何が必要か?をボクはまず考えます。webページを構成する要素は複数あり、

  • 写真
  • テキスト
  • アイコン
  • イラスト
  • フォント
  • タイポグラフィ
  • アニメーション(※用途による)

などですが、このアイコンやイラスト、タイポグラフィなどは基本的に制作するwebサイトのデザインテイストに合わせて自作するようにしています。

今回のびすけっと保育園の場合、「びすけっと」のイメージをより引き立てるためにビスケットのアイコンを数種類制作してwebページにも使っているのですが、さらにタイポグラフィも制作し、ページに反映させるようにしました。

イメージは英語のビスケット

今回のタイポグラフィをつくるにあたって、イメージしたのは子供の頃食べたことのある英語のビスケット。今はIKEAなどに売っているみたいですが、なんとなく頭に昔の記憶があったのでそれを元に既存のフォントを選び、そのフォントをビスケット風に加工していきました。

ビスケットタイポグラフィ
拡大するとこんな感じ

制作過程としては、既存フォントの文字の周りにビスケットらしい丸い模様?をつけ、文字の中央部分に気泡をランダムにつけていきました。文字の太さは太すぎると小さいサイズにすると読めなくなってしまいかねないので、細すぎず太すぎずのバランスを考慮しながら少しだけ試行錯誤しました。

オーソドックスなタイプのビスケットですが、あくまでwebページを構成するひとつの要素にすぎないのでパッと見て「英語のビスケット」と多くの人がわかるようなデザインがベストです。変にデザインにこだわる必要はありません。

タイポグラフィを応用する

webサイトに合わせたフォントが決まると、いろんな使い方ができるようになります。

例えばページ内に「3つのポイント」のような訴求が必要になった場合、各ポイントごとにバッジをつくってそれぞれが目立ちやすく、わかりやすくすることもできます。

タイポグラフィを使ったバッジデザイン
バッジももちろん自作です

バッジをつくらず数字だけで表示させることももちろん可能ではありますが、トンマナに沿ったデザイン要素があるのとないのでは見え方もかなり変わってきます。オリジナルの世界観をデザインでつくっていくためには、できるだけ要素にもこだわるということが大事だとボクは思っています。

びすけっと保育園のwebサイトはこちらから

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

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

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

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

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

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

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.

graphic

新事業の魅力を伝える。MERU&PLUSのプレゼンテーション資料デザイン

昨年の夏ごろにコーポレートロゴとwebサイトを制作させていただいた株式会社 阿波和さまの新事業「MERU&PLUS(メルアンドプラス)」のプレゼン…

2023.01.19.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル