これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
そのユーザーファースト、本当にユーザーファーストですか？｜宇野雄 / note inc. CDO
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages
最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。
【図解入門】シンプルな図の作り方｜櫻田潤🎨インフォグラフィック・エディター｜note
3年前に、図解の基本をまとめた本『図で考える。シンプルになる。』を書きました。その内容から、エッセンスを抽出したのが本noteになります。 （１）「幕の内図解」と「イチオシ図解」 図には、大きく分けて、2つのアプローチがあります。 ひとつは、幕の内弁当のように、いろんな要素を盛り込んだ図で、もうひとつが、唐揚げ弁当のように、イチオシのおかずにフォーカスした図です。 たとえば、桃太郎の話を「幕の内図解」のアプローチでまとめてみたのが、つぎの図です。 登場人物とエピソードをフラットに扱って、網羅的に盛り込んでいます。 この図を使って、人に説明しようとすると、「まず、お婆さんですが……」「つづいて、お爺さんですが……」といった具合に、「お婆さん」「お爺さん」「桃太郎」それぞれの視点に切り替えが必要になり、話す方も話しづらければ、聞く方もまどろっこしく感じてしまいます。 相手がじっくり聞く耳を持っ
おなじみのデザインが、メモからスケッチ、原画を経て形になるまでの過程が見られる展示会がすごい「デザインはこうやって生まれるのか！」
リンク 美術手帖 原画でたどるデザイナーたちの思考。「マル秘展 めったに見られないデザイナー達の原画」が21_21 DESIGN SIGHTでスタート 「日本デザインコミッティー」に所属する26名のデザイナーや建築家によるスケッチや図面、模型などの「原画」を集めた展覧会「マル秘展 めったに見られないデザイナー達の原画」が、東京・… 10 users 1860 ジェイ | EVeM（イーブン）事業開発セールス＆ベンチャーマネージャー @junta_suzuki 原画でたどるデザイナーたちの思考。「マル秘展 めったに見られないデザイナー達の原画」 控えめにいって最高だった。 久しぶりに全て忘れて目をひん剥いて見尽くしてきた。 #マル秘展 pic.twitter.com/YTFYWyL7FL 2019-12-22 09:18:37
2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
日本のWebデザインで見かける10個の特徴
ここ数年で、日本のWebデザインは大きく進化しました。 洗練されたデザインといえば、海外のものでしたが、今では日本でも数多く見られます。 デザインのスタイル、芸術的アプローチ、高度なソリューション、そして漢字や縦書きの文字を使ったデザインなど、日本のWebデザインで見かける10個の特徴を紹介します。 10 Distinctive Features of Japanese-Style Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ハイテクな演出 02. 他とは異なるソリューション 03. 日本独自の配色 04. 縦書き 05. 自然の風景 06. 巧妙なヒーローエリア 07. アニメに影響を受けたイラスト 08. キャラクター 09. 日本の漢字 10. 日本の伝統的な音 01. ハイテクな演出 W
和モダンとは？和モダンデザインの作り方 ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
和モダンデザインってなに？和モダンデザインとは、日本伝統的な和風デザインとモダンなデザインの融合されたデザインの事を言います。 日本の伝統的な和風配色や模様を使いながら近代的（モダン）にデザインしていくわけです。 和モダンデザインの面白いところは、その幅の広さです。 伝統的な和風デザインを強く出すタイプ、モダンさを強調するデザイン、その中間など和風に寄せたりモダンに寄せたりすることが出来ます。 今回はデザインの幅の事にはあえて触れずに和モダンデザインの基礎的なところをお伝えしていきます。 和風デザイン専門店ひだちデザインでは、和風モダンデザインの実績が多数ございます。よろしければ、ご覧ください。 制作実績一覧 和モダンの配色モダンな配色は黒、グレー、白、ブルー系など無機質で冷たい印象が基調となります。 ワンポイントとして赤や黄色など鮮やかな色を入れるとメリハリが付きます。 メリハリを付ける
アダプディブデザインか、レスポンシブデザインか
アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる
土器の文様、どしどし使って…市教委データ公開 : カルチャー : 読売新聞（YOMIURI ONLINE）
石川県野々市（ののいち）市教委は、市内の国史跡「御経塚（おきょうづか）遺跡」から出土した土器の文様２種類を、誰でも利用できるオープンデータとしてホームページ（ＨＰ）で公開している。 遺跡の知名度アップが目的で、家具や食器のデザイン用など営利目的でも無料で利用できる。自治体が文様をモチーフにしたデザインを活用する例はあるが、文化庁によると、オリジナルのまま自由に使えるようにする取り組みは珍しいという。 御経塚遺跡は、縄文時代後期中葉から弥生時代初期（３７００～２５００年前頃）の環状集落。東北などと交易していたとみられ、出土した土器の独特の文様から、当時の北陸で作られた土器の指標として「御経塚式土器」が設定された。
デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 - NxWorld
webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに気を付けたいポイントは余白で、何となくでつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。 上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。 これを近接を意識して配置し直したのが下のイメージで、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
プロトタイプも埋め込める、デザイナーの情報共有を加速させるDocBase
デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか？ 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで
スタンフォード大学でも使われている『共感マップ』のアップデート - カタパルトスープレックス
原文："Updated Empathy Map Canvas" by Dave Gray 何年も前にXPLANEで共感マップをデザインしました。私たちがゲームストーミングと名付けた人間中心デザインツールキットの一部でした。 共感マップは多くのチームが共感による人に対する深い理解を共有することに役立っています。顧客のエクスペリエンスを向上、社内政治の理解、より良い仕事環境など多くのプロジェクトで活用されています。 共感マップは私たちのワイルドドリームを超えて成功しました。スタンフォード大学d.schoolのカリキュラムで採用され、ハーバードビジネスレビューでも掲載されました。IDEOの創設者であるDavid KelleyとビジネスパートナーTom Kelleyが「IDEOのリーダーからの3つの創造的チャレンジ」の一つにも選ばれました。 なんでアップデート？ 共感マップが作られ数年経ちますが、
デザインを独学するなかで お世話になった 骨太な教本・技術本｜kazuma nishiwaki
専門教育やだれかに師事することなく、独学でやってきたなかで参考になった教本、後輩に読んでもらいたい、読んでもらって好評だった本をまとめました。 専門胸臆を受けていない、美大出ではないというのがキャリアのはじめではコンプレックスでもありました（今はほとんどないですが） 独学で進めていくと、どこかでツケを払うときが来ます笑 そんなときにお世話になった本たちです。 ノンデザイナーズ・デザインブック [第4版] 『この本がデザイン学校の4年間の代わりになる、と言うつもりはありません。また、この小さな本を読めば、自動的に優れたデザイナーになれる、と言うつもりもありません。しかし、あなたがページを見る目は確実に変わるでしょう。この本の基本原則に従えば、あなたの作品が、もっとプロらしく、組織化され、一体化され、おもしろくなることを保証します。』(著者「まえがき」より)定番の定番。 ノンデザイナーズとある
これまでのWebデザインに別れを告げる準備を始めよう
Amazonで森本 友理, 鈴木 慶太朗, 福岡 陽, 三宅 太門のWebデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来。アマゾンならポイント還元本が多数。森本 友理, 鈴木 慶太朗, 福岡 陽, 三宅… Webデザインの現在の潮流を考察するシリーズの最新版で、図々しくも名だたる方々に混ざって「レイアウト」の章を担当させていただいた次第です。 （私の勝手な）本書の読者のイメージとしてはWebデザインに過去触れたことがありつつも、最新のWeb動向が追いきれなくなっている方。ですので、この数年のWebデザインの変化をおさらいしつつも、それが2018年に至ってどう、なぜ変わっていったのかを文章にまとめました。みなさんが気になる「パララックスエフェクトってどうなったんや？？？🤔🤔🤔」なども真面目に考察しております。現在のトレンドと実際に採用しているサイトのスクリー
Web制作者がチェックしておきたい、最近のWebサイトで使用されているナビゲーションのデザインとアイデア
最近のWebサイトで使用されているデザイン的にも機能的にも優れたヘッダ ナビゲーションを紹介します。 テキストをリスト状に配置するだけでなく、アイコンや画像を添えたり、タブを効果的に採用したり、配置自体を工夫したり、さまざまなアイデアが取り入れられています。 11 Ways to Design the Perfect Site Navigation 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Sistrix SistrixはSEOソフトウェアパッケージを扱うドイツの会社で、非常に人気が高いSEOのブログでトラフィックを得ています。 Webサイトを見てみましょう。ナビゲーションは「Toolbox」「Blog」「Resources」「Support」の4つで構成されており、それぞれをホバーすることでリンクのリストをドロップダウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
考える力とは、クリエイターとしての成長反省、気付きを与えてくれる良書 -「アタマのやわらかさ」の原理。
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
http://www.life-is-bitter.com/entry/ui_checklist
