TOP  >  WebDesign  >  webデザインに欠かせない ボタンデザインの遍歴「Button Design Over the Years – The Dribbble Timeline」 Webが急速に発展しユーザーも年々増える中、デザインにもどんどんと変化していますが、毎日触れていることもあり、その変化を明確に感じることはあまりないかもしれません。今回はそんなデザインの移り変わりを感じられる「Button Design Over the Years – The Dribbble Timeline」を紹介したいと思います。 Webサイトで必ずといって良いほど目にする、ボタンデザインに注目して、その遍歴と共に比較されています。 詳しくは以下 2009年から2017年までの8年間のデータが掲載されており、こうして見比べてみると大きく変化していることが分かります。テキストの処理から

TOP  >  WebDesign  >  ブログを成功させるために必要なヒントをまとめた「20 Blog Design Tips for Creating Successful Blogs」 最近ではブログを始める人も多く、そんな中で自分の記事を広めていくことはなかなか難しいことですが、ちょっとしたことを改善するだけで意外と簡単に自分のブログを広めることができるのかもしれません。今回はそんなシーンで参考にしたい、「20 Blog Design Tips for Creating Successful Blogs」を紹介したいと思います。 The Complete List of Resources I Used To DIY My Blog Design – Where My Soul Belongs ブログの成功のために必要なテーマの選択やグラフィック要素の使い方など、成功するためのヒ

TOP  >  WebDesign  >  持っていると便利なWebブラウザの最新モックアップまとめ「10 Free Web Browser Mockups」 プレゼンテーションの際にWebデザインの画像を見せるより、実際にブラウザに表示されている状態を見せた方が、デザインの魅力が伝わるのではないでしょうか。そんな時に持っていると便利な最新のブラウザモックアップのまとめ「10 Free Web Browser Mockups」を、今回は紹介していきたいと思います。 Minimal Browser Template 4K on Behance クリエイティブ業界に関わらず、これから行う仕事内容に対してクライアントから深い理解を得ることは非常に大切なことです。その際、モックアップはとても優秀な働きをしてくれるのでぜひチェックしてみてください。 詳しくは以下 フラットタイプのブラウザモックアップ

TOP  >  WebDesign  >  ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」 スマートフォンのメニューデザインの定番と言っても過言ではないハンバーガーボタン。当たり前のように利用されていますが、今回はそんなハンバーガーボタンに関して分析をした考察「Analyzing the Hamburger Menu in Web Design」をご紹介したいと思います。 メニューアイコンとしてなくてはならない存在になっていますが、その反面でハンバーガーボタンのデメリットを考え提唱している、奥深い考察です。 詳しくは以下 一目でここにメニューがあるとわかる便利なミニマムデザインであるハンバーガーボタンですが、実は幾つかのデメリットを併せ持っています。まず1つ目が、サイトの機能を全てハンバーガーボ

デザインにとって色の配色はとても重要です。しかし色種類は膨大で、更にその中で組み合わせを考えるとなると、頭を悩ませる人も多いのではないかと思います。今回はそんなシーンで活躍してくれる便利なカラーパレットツール「colormind.io」を紹介いたします。 一般的に使われる自動生成ツールではなく、人工知能がカラーパレット生成をしてくれるという、他のジェネレーターとは違った新しい技術が取り入れられています。 詳しくは以下 このツールの特徴は何と言っても手軽に自動生成してくれること。自分自身で配色したり、細かい調整をすることはもちろん可能ですが、メインの色を指定してその色を「ロック状態」にしてしまえば、その色を基にしたカラーパレットを生成してくれるなんていう機能もあります。また、画像をアップロードしてカラーパレットを生成することもできます。こちらも、統一感のある配色が短時間で生成されるので、配色

TOP  >  WebDesign  >  コーダーの為の実用的な色理論が学べる「Practical Color Theory for People Who Code」 Webサイトのコーディングを一手に担うコーダー。デザインに関する知識を持っているだけで、仕事の仕方も大きく変わってきます。そんな中今回ご紹介するのは、コーダー達へ向けた簡易的な色彩学を学ぶためのWebサイト「Practical Color Theory for People Who Code」です。 色相の説明から始まりトーンオントーンなど、基礎的な知識を学ぶことができます。 詳しくは以下 赤・橙・黄・緑・青・水色・赤紫の基礎的な7色から、配色の仕組みと理論を学ぶことができます。選択した色が色相環においてどこに位置するのか、補色の関係はなど、各色に対する色の関係性を明確に見せてくれます。特徴的なのは各説明の後にその色を表す

TOP  >  Photoshop  >  Apple製品をイメージさせるクリーンなモックアップPSDフリー素材「8 Free Apple Devices Mockups」 デザインの成果物を、より良く見せることができるモックアップ。その中でもApple製品のモックアップは普及率の高さから非常に重宝します。そんな中今回ご紹介するのは、フリーで利用できるApple製品モックアップ「8 Free Apple Devices Mockups」です。 8 Free Apple Devices Mockups – Free Design Resources クリーンな白を基調とした、どんなデザインでも利用しやすいモックアップが8パターンまとめられています。 詳しくは以下 ほぼ全てが白の単色でモデリングされたCGを使用しており、リアルに見る製品とは違ったイメージの洗練した印象を与えてくれます。モデルに

TOP  >  Design , WebDesign  >  クリエイティブな1ページレイアウトを集めた「50 Beautiful One-Page Websites」 伝えたい情報を1Pにまとめた縦長の1ページレイアウト。メニューなどは存在しますが、基本的には上から読んでいくような構成でユーザービリティに優れた簡潔なWEB構成となっています。今回紹介するのはそんな1ページレイアウトの中でもクリエイティブなものを集めた「50 Beautiful One-Page Websites for Inspiration」です。 Nigel Evan Dennis, 2014 様々な業種業態の1ページで制作されたWEBページが全部で50集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Café Frida 背景と動きが印象的な1ページレイ

TOP  >  WebService  >  サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」 WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。 「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。 詳しくは以下 大きな動きと、何かが出てくる期待感は通常のlazyloadとはまた違ったクリエイティブ感を与えてくれます。様々なサンプルが公式サイトには準備されており、メニュー・モーダル・フォーム

ブラウザの発展によりjavascriptによるアニメーション表現はより高度なものとなってきていますが、今日紹介するのはCSSやSVGとも連携し、様々なアニメーションを描画できる軽量なライブラリ「Anime.js」です。 回転や移動といったシンプルなものから、ランダムな動きなどなど、作りこめばかなり高度な動きも可能な用で、CODEPENでは様々なアニメーションサンプルが上がっていました。 詳しくは以下 アニメーションサンプルは「anime.js – a Collection by Julian Garnier on CodePen」に、全部で10個設置されており、コードとプレビューを見ながら触れることができます。また、ライセンス形式はMIT Licenseとなっており、「GitHub – juliangarnier/anime: Javascript Animation Engine」にはフ

TOP  >  Font  >  デザイン性のあるフリーフォントが多数まとめられた「101 best free fonts of 2016, so far」 デザインの中でも非常に重要な役割を持つフォント。デザインにあった最適なものを選ぶことがとても大切です。今回はそんな選定時に参考にしたい、デザイン性のあるフリーフォントが多数まとめられた「101 best free fonts of 2016, so far」を紹介したいと思います。 Andis Typeface on Behance どのフォントもハイクオリティで使ってみたくなるものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Gamer Font FREE!!! on Behance レトロゲームをイメージさせるフリーフォント。個性的なデザインなので、他と差をつけたデザインにお

セリフやストローク、ステムなど、タイポグラフィにはその文字の一部分を表す用語があり、デザイナーであればある程度耳にしたことがあると思いますが、今回紹介するのはタイポグラフィの用語が学べる「TYPETERMS」です。 アクセスすると一つの文字が描画されており、その文字の中の一部をどのように呼ぶのかなどが一望できるようになっています。 詳しくは以下 それぞれの部分についてはクリックできるようになっており、その説明を見ることができます。意外とデザイン業界にいても知らない単語があったりここの部分はこういう呼び方をするんだなど発見がありました。もちろん言葉は相手も知っていることが前提で、伝わらなければ意味がないとは思いますが、なんとなく理解していた部分などが詳しく解説されているのは良いですね。 また「TYPETERMS」は埋め込むことが可能とのことで、下記に埋め込んでみました。書体についてタイポグラ

TOP  >  Design  >  デザイナーのための最新フリーリソースを多数集めた「60 fresh resources for designers, April 2016」 日々、新しい素材や情報・技術が発表され続けており、毎日デザインを手がけるデザイナーならぜひ把握したいところですが、情報量が多いネットの世界で、どのネタをチェックして良いのか迷ってしまうこともあるのでは？そんな中今回紹介するのは、デザイナーのための最新フリーリソースを多数集めた「60 fresh resources for designers, April 2016」です。 Renome – Free PSD Restaurant Template on Behance どれもクオリティの高い、尚且つ仕事にすぐ役立ちそうなものばかりが集められています。気になったものをピックアップしましたので、下記よりご覧ください。

TOP  >  Font  >  少ないスペースでデザインを魅力的にしてくれる コンデンスドフォント集「25 Free Condensed Fonts for Designers」 限られたスペースを利用して、文字情報を伝えながらデザイン性も確保できるコンデンスドフォント。長体のかかっているような個性的な見た目が特徴です。今回はそんなコンデンスドフォント集「25 Free Condensed Fonts for Designers」を紹介したいと思います。 Timber – Free Font on Behance おしゃれでデザイン性を高く見せてくれるフォントがたくさん紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 MINISTRY Free Font on Behance 横に圧縮されたようなフォントの形＋個性的な形が特徴のフォント。デ

様々な事象やモチーフをひと目で分かる形にしたアイコンはWEB制作ならずとも様々な制作の現場で重宝します。今日紹介するのはちょっと変わった切り口でまとめられた宇宙をモチーフにしたアイコンセット「Astronomy & Space Icons」です。 あまりUIなどでは利用できないとは思いますが、個性的で嵌まればものすごく使えるアイコンセットだと思います。 詳しくは以下 こちらのアイコンは2職で展開されており、惑星・ロケット・人工衛星、天文台など宇宙にまつわる様々なモノがアイコンでまとめられています。 「Astronomy & Space Icons」嬉しいことに、AI, Sketch, SVG, PNGの4つの形式で配布されており、殆どの制作の現場で活用できるものとなっています。再配布や販売は禁止されていますが、ライセンスは商用利用が可能とのことです。宇宙関係の仕事やデザインにアクセントを加

TOP  >  Design  >  デザイナーに便利なツールや素材を豊富にまとめた「What’s new for designers, January 2016」 デザインをする上で、たくさんの便利なツールや素材が揃っていると、仕事が効率的に進められるのではないでしょうか。今回はそんなツールを探す時に参考にしたい「What’s new for designers, January 2016」を紹介したいと思います。 brand-colors デザイナーに便利なツール類がたくさん紹介されています。気になったものをピックアップしましたので、下記よりご覧下さい。 詳しくは以下 Retype – Sumoing レトロテイストなフォントタイプを作成することができます。いろいろな種類が揃っているので、グラフィック表現にバリエーションを持たせることができそうです。 Colordrop – Inter

TOP  >  Design  >  屋外広告のデザインモックアップまとめ「12 Free PSD Outdoor Advertising Billboard Mockups」 屋外に設置される看板広告。サイズや場所にもいろいろなタイプが存在しており、イメージチェックのためにモックアップを使用することでより効果の高いデザインに仕上げることができるのではないでしょうか？そんな中今回紹介するのは、屋外広告のデザインモックアップまとめ「12 Free PSD Outdoor Advertising Billboard Mockups」です。 FREE PSD CITY OUTDOOR BILLBOARD MOCKUPS on Behance いろいろなタイプの屋外広告用のモックアップがまとめられています。気になったものをピックアップしましたので、下記より御覧ください。 詳しくは以下 Smart

TOP  >  Design  >  活用することでデザインをより魅力的に演出可能な9つのResourceまとめ「9 Fresh Resources For Web Developers」 通常のデザインだけでももちろん魅力的な演出は可能ですが、いろいろな機能を取り入れることにより、もっと魅力的なデザインに仕上げることができるのではないでしょうか？今回はそんなシーンにおすすめな9つのResourceまとめ「9 Fresh Resources For Web Developers」を紹介したいと思います。 GitUp デザインをより分かりやすく、さらに作りやすくしてくれる個性的なResourceがまとめられています。 詳しくは以下 toubou91/percircle · GitHub パーセンテージやキーワードなどを円形のモチーフで動きを付けて演出することができます。目立たせたい数値やワー

デザインベースを作り上げるのに必要なUI設計。またその先の設計に基づいたデザイン性のあるクリエイティブも重要となってきます。今回はそんなシーンで参考にしたい、デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」を紹介したいと思います。 いろいろな種類のデザインUIがピックアップされリストギャラリーとなり紹介されています。 詳しくは以下 グラフやチャート、カウントダウン、プロフィール、ソーシャルシェア、電卓、選択画面など、ピックアップされている種類はとても豊富。デザインはスタイリッシュなタイプのものが多く、主流のデザインとして参考にするのに最適です。基本海外のデザインなので、日本のデザインと差を付けたい時にもおすすめです。 100日という形でうたっていることから、100で更新がストップしているようですが、ぜひ今後も続けてほしいプロジェクトですね。UI設計の参考事例を

多彩な種類を揃えた フリーPhotoshopモックアップテンプレート集「Free Photoshop PSD Mockup Templates (25 New MockUps)」 フリーで配布されているモックアップ素材。非常にクオリティの高いものが多く、利用するだけでデザイン性を高めることができます。今回はそんなフリーPhotoshopモックアップテンプレート集「Free Photoshop PSD Mockup Templates (25 New MockUps)」を紹介したいと思います。 Free 10 Summer Work Mockups Bundle | MockupWorld いろいろな種類の、ハイセンスなモックアップ素材がまとめられており、どれも使ってみたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Social Media