グリッドデザインにマテリアルデザイン……。 ここ最近、Webデザインは真っ直ぐなものを好むような傾向にありました。しかし、2017年はその流れに反して、柔らかみを持ったグラデーション調の新しいプチデザイントレンドが注目されました。それが、一般に**「Blob」**と呼ばれるものです。皆さんは、Blobを耳にしたことがありますか。 今回は、*2017年に流行したデザイントレンド「Blob」*について解説し、Blobを取り入れる際のポイントとともにお伝えします。 流行に敏感なデザイナーだけではなく、最近のWebデザイントレンドが気になる方も注目です。 「Blob」とは？ Dribbble 2017年に見られたプチデザイントレンドとも言える*「Blob」は、英語で「（インクなどの）しみ」*を意味する言葉です。 Blobは漠然として捉えどころのない形をしており、主にランディングページの全体的なデザ

長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい

デザイナーがデザインを行うときの必須ソフトウェアといえば、Adobeのフォトショップ(Photoshop)やイラストレーター(illustrator)といったソフトです。 特にイラストレーターは、ベクターデータを取り扱うソフトウェアとして数多くのデザイナーが利用しており、現在でもベクターソフトの分野で不動の地位を築いているといっても過言ではありません。一方、これまでもイラストレーターの代替としてさまざまなオープンソースのソフトウェアが登場してきました。 最も有名なのがInkscapeで、2011年の登場から現在までベジェ曲線やスピロ曲線を描く無料ソフトとして多くのユーザーに利用されてきました。ただし、イラストレーターに比べると、まだまだ足りない機能が多かったために、満足のいかなかった方も多いのではないでしょうか。 そこで今回は無料のソフトながらもイラストレーターに劣らないソフトウェア「Gr

「ゲシュタルトの法則」と聞いて、みなさんは何を思い浮かべるでしょうか。 「ゲシュタルト崩壊」という言葉は聞いたことがあるかもしれませんが、その意味を正確に答えられる方は少ないのではないでしょうか。 AIや機械学習の時代の到来で、Web関係者はユーザーのニーズや習性を理解することがますます重要になってきています。 実は、そこで新たに注目を集めているのが、人間の視覚や知覚に関する法則である「ゲシュタルトの法則」なのです。 「ゲシュタルトの法則」自体は、20世紀初頭にマックス・ヴェルトハイマーなどを中心にして研究された心理学に関する法則ですが、デザイン法則の基本として多くのデザイナーが学んでいます(あるいは無意識的に利用しているデザイナーもいます)。 しかし、AIや機械学習の時代において、人間の特性を理解することはあらゆる分野で役に立つので、この法則のことを知っておいて損はないでしょう。 今回は

グリッドレイアウトを採用するホームページが増えてきて、もはやWebの世界におけるレイアウトの定番といっても過言ではなくなりました。 グリッドレイアウトは、情報をまとめてスッキリ・コンパクトに見せることができるので、情報量の多いホームページではしばしば活用されている手法です。 しかし、グリッドレイアウトは非常に多くのホームページが採用しており、情報が整理されており真面目な印象を受けるので、ユニークさや面白さが出ないのも事実です。 そこで登場したのが、グリッドレイアウトのよさを継承しながらも、あえてルールをはみ出すデザイン手法である*「ブロークングリッドレイアウト」*(Broken Grid Layout)です。 今回は、思わず視線が奪われてしまう「ブロークングリッドレイアウト」の基本的な概念から使用ポイントをまとめました。 まわりとはちょっと違ったホームページを作りたい、そんなときにブローク

世界中のWebデザイナーが、日々最新の技術やトレンドに追いつこうと必死になっています。 実際、AIやVRなどの技術がWebの世界にも侵食しはじめたこともあり、現状維持のままで留まってしまうWebデザイナーはますます世界に取り残されてしまうでしょう。 その中でWebデザイナーがやるべきなのは、世界でよく取り入れられているトレンドを知り、キャッチアップしていくことです。 今回は、2017年上半期に取り入れてみたい5つのWebデザイントレンドをご紹介します。 2017年上半期に取り入れたいWebデザイントレンド 1. シンプルな塗り背景 デザインにおいて何かを強調するときに使える最も簡単な方法のひとつが、2つ以上の要素を比べることです。 数年前にフラットデザインが流行しましたが、ここに来てアニメーションなどの動きをつけて、フラットデザインが再登場しています。 単色で塗った背景はフラットに見えるた

ホームページで必ずと言っていいほど必要になる要素といえば「見出し」です。しかし、ホームページに合わせて1からデザインするのは作業工数がかかる上に、毎回同様のデザインになってしまいがちです。また、CSSについてあまり知らない人にとっては、デザインしたくても自ら実装するのはハードルが高いと言えるでしょう。 そこで今回は、見出しをオシャレに装飾できるCSSのコードを紹介している記事をピックアップしました。 オシャレな装飾ができるCSSの見出しまとめ 1. 見出しをお洒落に装飾するCSSを紹介 http://ideahacker.net/2015/05/26/10208/ 11とおりのオシャレな見出しデザインを紹介している記事です。左と下にボーダーがあるもの、1文字目だけが大きいもの、といった定番デザインの見出しが作れるコードを掲載しています。 2. CSSのコピペだけ！オシャレな見出しのデザイン

Webデザイナーにとって最も重要なミッションのひとつは、ユーザーが使いたいと思うデザインを行うことです。 その目的を達成するために欠かせないのが*「余白」*(ホワイトスペース)です。 余白を適切に取ることで、美しく、読みやすいホームページになるからです。 Webデザイナーが考えなければならないことは「足し算」よりも*「引き算」*です。 私たちの周りには印刷物からデジタルメディアまで、外にある大きなビルボード看板からオンライン広告まで、あらゆる種類の情報が詰まっています。 Webサイトやモバイルアプリにも、たっぷりと情報が詰まっています。 そうした情報量の多いホームページやアプリケーションを、パッと見て理解しやすく、読みやすくするためには、*「余白」*と上手に付き合うのが不可欠です。 しかし、実は「余白」を適切に取ることは、可読性以上の意味もたくさんあるのです。 今回は、Webデザインにおけ

Web設計とソフトウェア開発は、これまで真逆の考え方をしていました。 通常Webサイトにおける設計では、ページ単位でデザインカンプを作成しますが、ソフトウェア開発では、コンポーネント単位で設計することが多くあります。 ところが、最近ではAbemaTVをはじめとして、コンポーネント単位でデザインを行うWebサービスも増えてきました。 その中でも、今注目されているのが、「Atomic Design(アトミック・デザイン)」と呼ばれるデザインシステムです。 Atomic Designはデザイン仕様の変更に強く再利用性が高いと言われており、Webサービスの開発に向いていると言われています。 今回は、コンポーネントベースでWebデザインを行うことができるAtomic Designの考え方の基本をご紹介します。 コンポーネント単位のデザインとは果たしてどういうもので、メリットはどこにあるのでしょうか。

ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは？ 非平行ヘッダー(Non-paralleled header) （非長方形ヘッダー(Non-rectangular header)とも言います）とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。

ホームページのデザインをスムーズに進めるのに役立つアイテムといえば、PhotoshopやSketchで使えるUIキットです。 そのまま使ったり、参考にしたりすることで思いついたアイデアを形にしやすくしてくれます。 闇雲にデザインを進めると、統一感の無いデザインになってしまいがちですので、UIキットを活用して質の高いデザインを目指しましょう。 今回は、無料で使えるUIキット40個を厳選してご紹介します。 Photoshop、Sketchで編集できる無料UIキット38個 1.FADE APP UI KIT | FREEBIE |（PSD） https://www.behance.net/gallery/36367535/APP-UI-KIT-FREEBIE- ダークなディープブルーに、鮮やかなミントグリーンがアクセントのデザインです。 シンプルでカッコいい要素をたっぷりと詰め込んだUIキットと

皆さんはデザイン思考(Design Thinking)という言葉をご存じでしょうか？ 「デザイン思考」という言葉を聞くと、デザイナーだけが持っている思考様式のように聞こえます ── しかし、実際は、文学・芸塾・科学・エンジニアリング・ビジネスなど、あらゆる世界で応用されている考え方です。そしてこの思考様式はあまりにも強力なので、AppleやGoogle、サムスンやGEなど、世界を先導する企業のアプローチ方法としても採用されています。 それでは、「デザイン思考」とはどういう考え方なのでしょうか。 なぜ「デザイン思考」はこれほどに有名になったのでしょうか。 また、そもそもなぜ「デザイン思考」と呼ぶのでしょうか。 今回は、その「デザイン思考」について、わかりやすく解説していきます。この記事を通じて、皆さんの会社でも「デザイン思考」という考えた方をぜひ取り入れてみてください。 デザイン思考(Des

メンタリストDaiGoが語る、的確にユーザーの心を掴む心理テクニック-THE MARKETING NATION SUMMIT 2016-更新日: 2018年05月29日ビジネススキルイベントレポート どのような業種・職種でも、人を相手にする限り、人の心がどのように動くのかを知っておいたほうが物事を有利に運べるのは想像に難くないでしょう。 特に、ユーザー視点が求められるマーケティングの場合は人の心の動きを体系的に捉えられる心理学への理解が不可欠です。 しかし、本気で心理学を学ぼうとしても、学ぶべき部分が膨大でどこから手をつければいいかわからないという方も多いのではないでしょうか。 今回は、マルケトが主催したマーケティングイベント「THE MARKETING NATION SUMMIT 2016」の特別講演として催された、メンタリストDaiGo氏による「マーケティングと心理学」をテーマにした講

デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど

Webサイトを運営している方であれば、さまざまなメディア・ブログなどからの情報収集を欠かかすことはできません。 ferretも同様であり、常日頃から大手メディアから個人ブログに至るまで幅広く情報収集を行っています。 今回は、ferretがRSSに登録して毎日チェックしている選りすぐりのメディア・ブログ44選をご紹介しますので、ぜひ情報収集にお役立てください。 このニュースを読んだあなたにオススメ プライバシーポリシーを記載しよう 情報収集には欠かせない！便利なFeedlyのイロハを解説 効率的に情報収集できるGoogleアラートの使い方 Google／Yahoo! 1.Google Japan Blog http://googlejapan.blogspot.jp/ Google Japanが発信している、主にGoogleに関する情報が日本語で書かれているブログです。 Googleの公式サ

サービス、商品によっては「女性向け」のデザインが好ましいことがありますが、男性のデザイナーや女性らしいデザインが苦手な方にとっては上手く表現できないことがあります。 そんなとき素材を使うことで、一気に女性らしさをアップすることができます。 今回は、女性向けデザインにぴったりなフェミニン系のブラシを60個ピックアップしてご紹介します。 花やハートといったガーリーなモチーフや、キラキラ感を演出できる素材を厳選して集めました。女性らしいサイトをデザインする際に、ぜひ使ってみてください。 女性サイトにぴったりのPhotoshopブラシ60選 1.Flower Roses - PS Brushes http://tanyalan.deviantart.com/art/Flower-Roses-PS-Brushes-98670645 和風にも洋風にも使えそうな、シックなバラのブラシです。 落ち着いたデ

作品紹介をより魅力的にすることができる「PSDファイル」をご存知でしょうか。 PSDファイル形式のモックアップ、テンプレートは手軽に編集することが可能で、自作デザインの写真をはめ込むだけで活用できます。また、完成作品のラフを作りたい時にもサクッと作れて便利です。商品・サービスのプレゼンテーションなどでラフが必要な時に活用してみてはいかがでしょうか。 今回は、無料で使えるPSDファイルをまとめてご紹介します。気になるものがあればぜひダウンロードしてみてください。 無料で使えるPSDファイルまとめ 1. Psd Slipcase Book Mockup Vol8 https://www.pixeden.com/psd-mock-up-templates/psd-slipcase-book-mockup-vol8 本のスリップケースを再現したPSDモックアップ素材で、ケース表面と本のデザイン両方

皆さん、クリエイティブ・コモンズという言葉を聞いたことはありますか？ デザイナーの方は、仕事柄よく耳にするかもしれません。 クリエイティブ・コモンズは、コンテンツを正しく流通させるための活動及び団体名を指します。 作者の意志を反映し、適切にコンテンツが流通する仕組み作りを目的としているクリエイティブ・コモンズはコンテンツを作成する側も利用する側もしっかりと理解しておくべきです。 今回は、クリエイティブ・コモンズの基礎知識を解説します。 クリエイティブ・コモンズとは クリエイティブ・コモンズとは、作者の意志を反映しながら作品の流通を図るための活動全般と、活動する団体を指します。 各国の著作権法に則った活動が行われており、日本においてはクリエイティブ・コモンズ・ジャパンが日本の著作権法に準拠した規定を設けています。 参考：クリエイティブ・コモンズ・ジャパン あらゆるコンテンツは著作権法によって

ferret編集部：2015年8月6日に公開された記事を再編集しています。 バナーくらい短時間でできる！と意気込んだものの、思った以上に時間をとられることはありませんか？ 簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。 そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。 今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。 広告バナー制作の全体像 短時間でバナーを作成する前提条件 制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があ