Googleのデザイナーなどのポートフォリオを300件以上閲覧できるサイト Bestfolios - LOGzeudon
海外のデザイナーのポートフォリオを見るのに便利なサイトの紹介です。 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase ポートフォリオだけでなく、次の４カテゴリで情報がまとめられています。 Portfolios（ポートフォリオ） Resumes（履歴書） Resources（デザイン素材） Articles（投稿記事） オススメなページ順に、簡単に内容を紹介します。 Articles（投稿記事） ポートフォリオに関連した記事が読めます。 今のところ４記事しかありませんが、いずれもタイトルの魔力がすごい。 Google Designer Portfolio Collection 1 Facebook Product Designer Portfolio Collection 1 10 great fonts you may
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
シンプルなウェブデザインを作成する、知っておきたい7つの基本ルール
KISS（略語: Keep it simple, stupidのコンセプトは、US海軍が取り入れた1960年ごろにはじまっています。KISSの原則は、ほとんどのシステムが複雑ではなく、単純であればもっとも効果的であることです。デザインプロジェクトでも同じことが言えます。 多くのグラフィックデザイナーは、早い段階でKISSの原則について学びますが、では実際にどのように活用すれば良いのでしょう。作成をはじめると見た目よりもう少し複雑であることが分かると思います。 今回は、シンプルなウェブデザインを作成する7つのルールをご紹介します。これらのルールを取り入れることで、ごちゃごちゃ感を取り除き、美しくシンプルなデザインに役立てることができるでしょう。 詳細は以下から。 1ページに１つの目標を設定しよう。 シンプルなデザインは、プロジェクトの目標やウェブサイトにおける各ページのはっきりとした目標から
2016年、デザインやアイデアが素晴らしかったWebサイトのまとめ -Website of the Year 2016
世界中の現役クリエイターを審査員に迎え、デザインやアイデアが素晴らしいWebサイトを選出するCSS Design Awards主催の「Website of the Year 2016」が発表されました。毎年楽しみにしている人も多いと思います。 「Website of the Year」のファイナリストに選出されたWebサイトを紹介します。 Website of the Year 2016 デザインがすごいだけでなく、操作やUIにもアイデアが満載のサイトばかりでした。 Chromeで見ることをお勧めします、音がでるサイトがけっこう多いです。 サイトとの出会いを楽しんでいただくため、説明は一切無しにしました。先入観無しでお楽しみください。
新しいウェブデザインの魅せ方を知ろう！参考にしたいWebサイト40個まとめ 2016年8月度
移り変わりのとても速いウェブデザインの世界では、どのようなデザインや実装テクニックが人気トレンドとなっているのか、定期的にチェックしておくことが重要です。今回は、クリエイティブなアイデアの参考にしたい最新ウェブデザインをまとめてご紹介します。 コンテンツを最大限うまく引き出し、ユーザーの印象に残るデザインを演出する最先端ウェブテクニックを体感してみましょう。各サムネイルをクリックすることで、参考ページを確認することができます。 詳細は以下から。 新しいウェブデザインの魅せ方を提案する、参考にしたいサイトまとめ Pharrell Williams ファレル・ウィリアムズの世界観を表現した公式ページ。グリッド上に並べられたサムネイルをクリックすると、豊富な情報を多彩なレイアウトでまとめています。 Heyblend 美しい配色とシンプルなレイアウト、書体の組み合わせはぜひ参考にしたいミニマルデザ
Webサイト制作がAIで実現!?デザイン、ABテスト実行ツール『FIREDROP』 | Ledge.ai
衝撃的なニュースが飛びこんできました。ほぼタイトルの通りですが、現在事前エントリー受付中の『FIREDROP』なるツールが色々ヤバイです。 テンプレートという概念を無くす。AIによる自動デザイン 以前にLedgeでも紹介したWix ADIやThe Gridの場合、デザインは（ほぼ）自動ながら、それでも事業形態やサイトタイプなど、いくつかのテーマ選択は人間が行う必要がありました。 が、今回発表された『FIREDROP』の場合、それすらAIにマルナーゲでOKらしいです。 テキストで書いたコンテンツをドサッと上げると、言語を形態素解析 ⇒ 文脈から意味を推測して『誰のどんなニーズに対しなにをどう伝えたいサイト』を作りたいのか？を一瞬で把握。 そこからいい感じにページ構成とレイアウトを整えて60秒で完成させてくれる。とかなんとか。 もし人間にそんなことできるデザイナーさんがいたら何としてでも採用し
【2016年上半期】ウェブデザイナーが注目したい、本当に流行中のWebデザイントレンド5つ
Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言
ウェブデザイナーが見直しておきたい、2016年のウェブデザイントレンド10個まとめ
2016年も３分の１が過ぎ、今年を代表するウェブデザイントレンドがはっきりと見えてきました。Studio by UXPin で公開されている無料Eブック「The Complete 2016 Web Design Trends Bundle」では、2016年のトレンドを10個のポイントに分けて、具体的なウェブサイトと一緒にまとめています。 今回は、デザイントレンド10個のポイントのみを、簡単にまとめてご紹介します。より詳しい内容に関しては、無料ダウンロードできるEブックで確認できます。TwitterやFacebook、Googleなどの大企業を中心とした、参考サンプル45サイトが掲載されています。 詳細は以下から。 01. マイクロインタラクション Microinteraction マイクロインタラクションは、モバイルアプリのデザインにおいて、大きなアニメーションに比べ、ユーザーがあまり考え
印象的なビビッドカラーのWebサイトまとめ
2016年3月22日 Webデザイン, 色彩 パッと見ただけで印象に残りやすいビビッドカラー。扱い方を間違えると、ただうるさく、ゴチャゴチャして見えるだけになってしまいます。今回はそんなビビッドカラーをうまく使っているWebサイトをいくつかまとめてみました。ビビッドカラーとのうまい付き合い方も合わせて読んでみてください！ ↑私が10年以上利用している会計ソフト！ ビビッドカラーってどんな色？ ビビッド（vivid）は日本語で「色鮮やかな」という意味。明度・彩度ともに高く、正式には「純色」と呼ばれる色相のことです。鮮やかで活発、強いイメージがある派手な色なので、アクセントカラーとしてデザインに取り入れることも多くあります。 具体的なカラーコードを紹介しているサイトもありました。こうして並べて見るとかなり目がチカチカしちゃいますが、使うポイントを抑えておけば、とってもかっこいいデザインに仕上げ
Webデザインの参考にしたい！イカしてるゲームサイト7選まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの佐藤タカアキ（@sato_tkaaki）です。 私事ですが、先日WiiUの『スプラトゥーン』を買いました。 スプラトゥーンのゲームのデザインがイカしてる スプラトゥーンとは インクを撃ち合うアクションゲーム。主人公はヒトの姿に変身できる「インクリング」という名前のイカ。 ヒトの姿ではインクを撃って「ナワバリ」を広げることができる。イカの姿になるとインクに潜る。床でも垂直な壁でもインクが塗ってあればヒトのときより高速に、自由に泳ぐことができ、潜ったまま隠れていることもできる。同時にインクの残量とダメージがヒトの姿より早く回復する。ただし相手のインクには潜ることは出来ない。相手のインクを踏むとダメージを受ける上、足をとられて動きが鈍くなる。 Wii U GamePadの機能を活かしジャイロセンサーで直感的に狙いを定めることができ、またWii U GamePadの画面には
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
アプリUI制作のチュートリアルで学ぶSketchの使い方 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第1回ではSketchの魅力についてお伝えしました。今回は、スマートフォンアプリの「Sign upページ」を例に、基本的なUIをデザインする上で必要なSketchの操作を説明します。Sketchの使い方だけでなく、UIデザインに役立つTipsも紹介します。 ※文中の（A）などはショートカットキーです。積極的に使って覚えていきましょう！ Sign upページは、以下の手順で作成します。 アートボードを用意する ナビゲーションバーを置く ユーザーアイコンの画像を丸く切り抜き配置する 入力欄を作成する ボタンを作成する 解説の中では細かい数値や色については触れませんが、同じ数値で作成したい方は図を参考にしてください。また、今回作成する「Sign upページ」のSketchデータはこちらからダウンロードできます。
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
モバイルデバイスにおけるアコーディオンUI
アコーディオンはモバイルのスペースを節約するが、方向感覚を失わせたり、大量スクロールの要因にもなる。しかし、簡単なデザイン修正で、このUI要素のユーザビリティは改善できる。 Accordions on Mobile by Raluca Budiu on May 31, 2015 日本語版2015年7月21日公開 アコーディオンというのは、展開することで、隠していた情報を表示するデザイン要素である。オーバーレイとは違い、アコーディオンはページのコンテンツを押し下げるので、ページコンテンツの上に重なることはない。 Toomy.com： Price（：価格）というフィルターはアコーディオンとして実装されており、展開するとページコンテンツは押し下げられる。 デスクトップでのアコーディオンの利用には議論の余地がある。一方、モバイルではアコーディオンは最も役立つデザイン要素の1つだ。ごく小さな画面スペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
角丸と矩形はどっち？ ベタ塗りとストロークとシャドウは？ やっぱりHelveticaなの？ -2015年Webデザイナーの実情を調査
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
2015年、このWebサイトのデザイン・アイデアは見逃せない！「Website of the Year」 -日本からも2つのサイトが受賞！
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
