「このデザインはシンプルだね」 と言われて、ピンとくる人はどれくらいいるでしょうか。 Appleのホームページのように、シンプルで洗練されたホームページをデザインしたいと思っている人はたくさんいるでしょう。 しかし、いくらワンポイントアドバイス集を見てもなんだかシンプルとはかけ離れていたり、どこかごちゃごちゃしていたりするのは、そもそもシンプルとはいかなるものか、その定義がはっきりしていないからです。 今回は、特にシンプルだと思われる洗練されたデザインのホームページを集めました。 シンプルさを表現したホームページを見て、「シンプルとはどういうことなのか」を突き詰めて考えてみましょう。 ※ホームページのキャプチャは掲載当時のものです。現在のホームページとは異なることがあります。 シンプルすぎるデザインのホームページ 1. Spencer Nelson http://spencenelson.

Webデザインの配色に悩むのは、Webデザイナーなら誰でも経験しているでしょう。 そんな時、シンプルに*「白」と「黒」*だけを使ったデザインを選択するのも1つの手段です。 純潔でさわやかな印象のある「白」と、大胆で重厚的な「黒」は、一見すると正反対の色のように見えます。 しかし、そんな「白」と「黒」をうまく組み合わせることで、シンプルかつエレガントで、クールなホームページが出来上がります。 一方で、配色を最小限に抑えている分、ごまかしが効かない分野でもあります。 今回は、白と黒だけで表現された美しいホームページをご紹介します。 たったの２色でもデザイン性の高いホームページができることを確認してみましょう。 白と黒だけで表現された美しいホームページ 1. LAURENT PEREZ DEL MAR http://www.laurentperezdelmar.com フランスの音楽家・作曲家の

こんにちは。TechAcademyの小嶋です。 皆様は「マイクロインタラクション」という言葉をご存知でしょうか。 誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。 朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。 今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。 あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。 マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。 説明書を読まず

2016年には新タイプのホームページのデザインやテクニックが流行しました。 しかし、実際にはまだまだ駆け出しのトレンドも多く、2017年も引き続き、世界のクリエイターたちによってより面白いアイデアが生み出されるはずです。 そこで今回は、2017年に挑戦してみたいWebデザインのアイデアを集めました。 これらのアイデアは、すでに登場しているものの、まだ採用しているホームページはそれほど多くありません。 インスピレーションを生み出すために、これから紹介する10のアイデアを見てみましょう。 参考： あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選｜ferret 2017年に挑戦してみたいWebデザインアイデア10選 1. ビビッドなグラデーション 出典：Impossible Bureau ※このWebページは現在公開されていません グラデーションはCSS3登

2016年、Webデザイナーにとってもっとも重要なトピックは何だったのでしょうか。 今年も様々な技術や手法が登場しました。ここで一度、おさらいをしておきましょう。 今回は、2016年に頻繁に取り上げられた重要トピックを中心に、2017年に向けてWebデザイナーが押さえておきたいものを7つピックアップしました。 2017年は、また新たなキーワードがたくさん飛び交うかもしれません。今年のうちに今のトレンドをキャッチアップしておきましょう。 来年に持ち越せない！Webデザイナー必見の2016年重要トピックス 1. モバイル・プロトタイピング 参考： Webサービスやアプリ開発に必須！国内外のプロトタイピングツール6選 2016年は「Adobe XD」や「Facebook Origami Studio」といったモバイル端末のプロトタイピングツールが続々とリリースされました。 日本でも次第にアプリや

ホームページのデザインをスムーズに進めるのに役立つアイテムといえば、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キットと

作品紹介のためにポートフォリオ（実績をアピールするサイト）を用意したいとは思っても、重要なポートフォリオサイトのデザインが決まらない！と悩んでしまう方も多いのではないでしょうか。 作品の評価はもちろん、ポートフォリオサイト自体も当然評価対象となりますので、素敵なデザインに仕上げたいものです。 もしポートフォリオサイトをもっとカッコよくしたいと思ったら、クオリティの高い既存のデザインを参考にするといいでしょう。今回は、ポートフォリオサイト作成の参考になるデザイン20選とポートフォリオサイトの作り方をご紹介します。 【Webデザイナー・Webディレクター】のポートフォリオサイト 1. Mana's Portfolio Website http://www.webcreatormana.com/ Web関連で有名なブログ『Webクリエイターボックス』の運営者、Mana氏のポートフォリオサイトです

ワイヤーフレームのツールをご紹介する記事はいくつもありますが、今回は実際にWeb制作のプロジェクトの中でワイヤーフレームを作って進めていく様子を、『Cacoo』というツールを使ってご紹介していきます。Webディレクターの方、プロダクトオーナーの方は必見です。 1. マインドマップの作成（要件出し） アイディアを絞り出すには、マインドマップが便利です。Caccoにはマインドマップのテンプレートも用意されているので、うまく使ってブレスト（ブレインストーミング）をしましょう。初めは個人で出し尽くすことをオススメします。 なぜなら、初めからチームでやると、話がいろんな方面へ向いてしまうので、まとめ難くなってしまうからです。まずは、一人でアイディアを出し尽くし、その後チームで集まって、細かな部分に対してブレストを膨らませていくことをオススメします。 参考図書：ザ・マインドマップ これを読まずにマイン

自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。

デザイン業界は常に新しいトレンド・技術が続々登場し、目まぐるしいスピードで変化しています。きっと「常に情報収集を行っている」というデザイナーの方も少なくないはずです。 今回は、ぜひそうした方々に有益な情報をご紹介します。情報収集というと、インターネットや本などを通じてというのをイメージされる方が多いかと思いますが、スライドシェア（Slideshare）もオススメの手段です。 「スライドシェアが何か」というと、プレゼン資料をインターネット上で公開・共有するサービスを指します。良質なスライドが数多く揃っていますので、知識を深めたい方にはもってこいです。今回は公開中のスライドシェアの中でも、特にデザインが学べるスライドを中心にまとめてみました。ぜひ参考にしてください。 デザインの学習にもってこい！デザイナー向けスライドシェア 1. 優れたデザインの 定義と思考方法 https://www.sli