グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP

2021/01/12 14 users Glassmorphism ジェネレーター CSSコピペ

Glassmorphism（グラスモーフィズム）は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。 グラスモーフィズムって何？ 2020... 続きを読む

体験構造とKPIで前進するデザインドリブンなプロダクト開発｜Keita Saito / Goodpatch Anywhere｜note

2020/12/07 7 users KPI デザインドリブン プロダクト開発 半年 プロダクト

この記事はGoodpatch AnywhereアドベントカレンダーとGoodpatchアドベントカレンダーの7日目の記事です（欲張り） 今日はここ半年くらい温めていたデザイン手法について紹介したいと思います。「プロダクトやサービスの体験構造とKPIを表し、チームでディスカッションするための成果物」として「体験構造図」と仮称して... 続きを読む

「とにかく引き算が大事」消費者庁の資料をデザイナーの人がリデザインしたらめちゃくちゃ見やすくなった - Togetter

2020/06/12 744 users Togetter 引き算 instagram.com CEO

つだしんご @shin_5_9 □主にwebやグラフィックのデザインをやってます □トレモロ(株)CEO □デザイナーじゃなくても素敵なクリエイティブを作れるデザイン手法を色々呟いてます instagram.com/shin_5_9/?hl=ja 続きを読む

ユーザーが自然と目を向ける、視線誘導を意識したUIデザイン | Goodpatch Blog

2019/07/02 58 users 視線誘導 UIデザイン Goodpatch Blog 錯視

Goodpatch Blogでは、人の錯視を考慮したUIデザインの手法「視覚調整」についてご紹介しました。 UIにも必要な錯視への考慮、デザイナーが行う視覚調整 本記事でご紹介する「視線誘導」とは、情報設計に用いられるデザイン手法の１つです。今回は、UIデザインをはじめとするレイアウトにおける視線誘導の事例についてご... 続きを読む

企業キャラクターのデザイン手法 〜 けんさくとえんじんの友達から育て方まで - Yahoo! JAPAN Tech Blog

2019/05/16 23 users エンジン 武井 ヤフー ゴールデンウイーク明け 連休明け

デザイン特集１本目の記事です。 こんにちは。ブランドマネジメント室 デザイナーの武井です。 ゴールデンウィーク明けにこの記事を書いているのですが、正直、連休明けの執筆は頭が回らなくてダメです。 今回はヤフーの公式キャラクター「けんさくとえんじん」のデザインや設計手法の秘密に触れます。 けんさくとえんじ... 続きを読む

Photoshopで「光」を極めよう！ライティングエフェクトに強くなるチュートリアル、作り方65個まとめ - PhotoshopVIP

2019/02/22 34 users Photoshopチュートリアル ライティング テクニック

光や炎、虹などをリアルに表現できる、ライティングエフェクトに特化したPhotoshopチュートリアルをまとめてご紹介します。 当サイトで2010年ごろより毎月まとめているPhotoshopチュートリアルを参考に、直近5年の間に公開されたデザイン手法をまとめて確認できます。 さまざまな光やライティングを自由に操るテクニック... 続きを読む

組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼう

2018/11/22 43 users 長所 crema design いいとこ取り 黒野明子

組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼう 1. ＋　＋　の長所を活かした デザイン手法を学ぼう crema design 黒野明子 @Adobe MAX Japan 2018 組み合わせ利用でいいとこ取り！ Adobe XD Illustrator Photoshop 2. 自己紹介 黒野明子@cremaくろ        の　... 続きを読む

2018年版：パララックスを簡単に実装できるおすすめプラグイン8選 | Web Design Trends

2018/10/04 72 users パララックス ライブラリ WEBサイ プラグイン ユーザー

パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見せたりなど様々な効果を発揮します。 Webサイトでパララックスを実装するためのプラグインやライブラリは様々なものが公開されており、それらを利用することで初心者の方でも簡単にパララックスをWebサイ... 続きを読む

ウェブデザインの本質に主眼を置いたデザインガイドライン「ブルータリスト・ウェブ・デザイン」 - GIGAZINE

2018/07/09 392 users GIGAZINE ウェブデザイン 主眼 焦点 アプリケーション

by Igor Miske 建築形式のひとつである「ブルータリズム」を基に、ウェブサイト本来のあるべき姿に焦点を当てて作られたデザイン手法が「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」です。「雑誌ではないが雑誌のような記事が載っている」「アプリケーションではないが商品の購入やユーザーとのやり取り... 続きを読む

ホットペッパーに勝つ方法はあるか？ | KOMUGI

2017/11/28 77 users ポジション KOMUGI ランチパスポート フェイスブック

「ホットペッパーに勝つ方法」をテーマに、「行動のポジションを確認する」「受動的な体験をデザインする」「つい触ってしまう『きっかけ』を考える」という3つのポイントから「ランチパスポート」を勝手にコンサルすることで、行動モデルの基礎的なデザイン手法を考えました。前回は 「メディアビジネスは今すぐやめましょう」 というテーマでした。記事はフェイスブックで1,300いいね！をいただき好評でしたが、やはり抽... 続きを読む

CSSでバーティカルリズムを実現しよう！line-height-stepを使ってみる | HTML5Experts.jp

2017/11/14 56 users タイポグラフィ CSS Vertical rhythm 類似

「バーティカルリズム」（Vertical Rhythm）と呼ばれるデザイン手法があります。最近は関連記事も増えてきたので聞いたことがある、という方もいらっしゃるかもしれません。日本語本来のタイポグラフィでは「行取り」と呼ばれる類似の手法があり、ほぼ全ての印刷物やワープロで使われています。 「行取り」あるいは「バーティカルリズム」とは、要素の配置に一定のリズムを取り入れることで、デザイン上の安定感や... 続きを読む

Sketch LibrariesとAbstractを使ったAtomic Designの実践

2017/10/20 49 users Nagisa Abstract 川畑 コンポーネント指向 効率

はじめに こんにちは！ 社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。 先日、 デザイナーリーダーの川畑が執筆した記事 にある通り、Nagisaではデザイン手法として Atomic Design を採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。 コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変... 続きを読む

マテリアルデザインの概念を受け継いだ、マテリアルデザインライトとは | UX MILK

2017/10/16 97 users 概念 UX MILK マテリアルデザイン UXPin トレンド

JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 今年のデザインのトレンドが、マテリアルデザインの表現であることは、間違いありません。 GoogleのAndroidをベースにしたデザイン手法であるマテリアルデザインは、当初モバイル端末向けのインターフェイスとしてスター... 続きを読む

無限スクロールの課題とは！縦長サイトのデザイン手法 | TechAcademyマガジン

2017/06/14 39 users TechAcademyマガジン 無限スクロール 本稿 課題

TechAcademyマガジンはオンラインのプログラミングスクール TechAcademy [テックアカデミー] が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。 本稿は、Smashing magazineの ブログ記事 を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました... 続きを読む

機能を表現するデザイン手法。キャラクター、ブキ、ギアのデザインに迫る、『Splatoon（スプラトゥーン）』開発スタッフインタビュー【デザイン編】(1/4) - ファミ通.com

2015/09/09 237 users Splatoon ぶき 増補 イカ旋風 任天堂

●3本立て開発者インタビュー その2 デザイン編 2015年5月28日の発売から、全世界で“イカ旋風”を巻き起こしている、任天堂のWii U用ソフト『Splatoon（スプラトゥーン）』。ファミ通.comでは、週刊ファミ通2015年8月6日号（2015年7月23日発売）『スプラトゥーン』大型特集の開発者インタビューで掲載しきれなかった分を増補改訂した、3本立てロングインタビューを掲載している。今回... 続きを読む

O'Reilly Japan - マイクロインタラクション

2014/03/04 126 users マイクロインタラクション インタラクション プロトタイプ

UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も... 続きを読む

AppleのUXエバンジェリストが教える、優れたアプリアイコンをデザインする6つの秘訣 | SEO Japan

2013/12/02 76 users アプリアイコン 一獲千金 UXエバンジェリスト Apple

久々にこんなベタな記事を載せてみたかった、ということで今日もアプリで一獲千金の夢を描いているあなたに送る、より注目を集めるアプリアイコンのデザイン手法についてまとめた記事をThe Next Webから。リリースしても注目を集めるのは至難の業なのがスマホアプリの世界。SEOも微妙な感じですし、広告費を投入するしか露出の手段はないのか、、、という感じですが、アイコンのデザインが良ければ他アプリより目立... 続きを読む

Amazonの商品開発は、まずプレスリリース作成から始める | fladdict

2012/08/10 1036 users fladdict プレスリリース プレス 需要 既存プロダクト

Amazonでは商品開発をするとき、まず一番最初にプレスリリースを書くらしい。これは”Working-Backwords“と言われる、デザイン手法。ちょっと面白げなので色々と調べてみた。 Working-Backwords法では、商品開発はお客から見た需要とメリットをスタート地点にする。 まず、開発スタート前にプレスリリースを作成する。 このときプレスの内容は、既存プロダクトの問題点と、新製品がそ... 続きを読む

どや！？すぐにはじめられるWebデザイン勉強法！女子大学院生がWebデザインについて語るブログ「Web-DAYsign」が面白い。 | デザインどや！？

2012/03/05 140 users 新人デザイナー ベース コンセプト Webデザイナー 彼女

2012年4月からWebデザイナーとして働く女子大学院生が、Webデザイン事例について語っているブログ「Web-DAYsign」の紹介。 4月から新人デザイナーとなる彼女がデザインの勉強をするために取り組んでいることは、「1日1WebページのペースでWebデザイン事例について、私なりに語ること」です。 どこかのデザイナーさんが作ったWebデザインについて、コンセプトやデザイン手法をじっくり考えてみ... 続きを読む

単機能トップページというデザイン手法が人気急上昇中 | Web担当者Forum

2009/10/19 349 users Web担当者Forum 人気急上昇中

最後にデザインの話題を取り上げてからずいぶん経ったけど、そろそろまた書くべき頃合いだと思う。 今回焦点を当てるのは、レトロ（かなり前から用いられている）でありながら今また勢いを増しつつある（少なくとも僕は人気上昇中だと感じている）デザインスタイルだ。もっと具体的に言うと、目的を1つに絞り込んだトップページのことだ。 最初に、簡単な例を挙げる。GmailやYahoo!メールのメールアドレスを入力する... 続きを読む

「左上の魔術師」理論

2007/04/11 736 users 理論 魔術師 カラム 左上 見栄え

Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム... 続きを読む