2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
サンプル例でわかる！注目したい2020年のWebデザイントレンド8個まとめ
2020年のメインとなるトレンドのひとつが「ダークモード（英: Dark Mode）」です。主にUIデザインに特化しており、ユーザーがダークテーマへの切り替えできるオプションが重要になるでしょう。暗い背景は、デザイン要素を際立たせ、コントラスト比もよりくっきりとなりますが、目の疲れを軽減することで視覚的な人間工学の改善を期待できます。 DarkDesign Studio ダークモードのウェブデザインはモダンな見た目だけでなく、目にやさしく、配色やデザイン要素をポップに表現できます。 ビジュアルに優れたウェブデザインのトレンドには、実用性からはじまったものがある場合があり、実際にダークモードは、OLEDスクリーンに適しています（電力を節約し、スクリーン寿命を延ばす）。また、ウェブサイトで使われている配色の視認性を改善できる点もポイント。 偶然にも、ダークモードデザインは、暗闇に輝くネオンや未
デザインの基礎力をアップする「雑に見えない余白のルール」５つのポイント｜BLOG｜株式会社エムハンド
こんにちは、デザイナーの内藤です。 みなさんは、デザインをする上で余白とどのように付き合っていますか？ 余白はデザインにメリハリとルール、そしてリズムを与えます。 この余白に対して、「なんとなく」「感覚で」というナァナァな状態で付き合っていると……良かれと思って設定した余白が、なんだか違和感のあるスペースになってしまったり、デザインの輪郭がぼやけて雑な印象を与えてしまったり、最悪なケースになると意図せぬ情報の解釈をされてしまいます。 今回は、普段デザインする際に気を付けている「雑に見えない余白のポイント」をご紹介します。 余白は情報に区切りを与える役割を持っています。 上の図では、情報の階層は「グレー背景のハコ > 白背景のハコ*2 > 画像＋テキスト」となっています。 この場合、余白の大きさは下記の順番で設定すると、情報の区切りが明確になります。 ①グレー背景のハコ ⇔ 白背景のハコ ②
ロゴデザインでやるべき5つのこと 〜ロゴFIXまでの過程を全公開！〜 | CyberAgent Developers Blog
どうもみなさんこんにちは〜！ AID（Ameba Innovation Designers）というデザイナー組織に所属している、松本です。「Ameba占い館SATORI」のデザインを担当しています。 今回は、AIDのロゴができるまでにやった5つのことをお話ししたいと思います。 AIDってなに？ AIDとは「Ameba Innovation Designers」の略で、Amebaが提供しているサブブランド事業のデザイナーの集まりです。 Amebaサブブランド事業をDESIGNでAID(助成、促進)し、Innovationを起こすことを目的としています。 今までに、メンバー各自で一つテーマを決めて研究＆発表をしたり、勉強会やデザインコンペの開催をしてきました。 ▼Amebaのサブブランド事業 AIDの活動を広げていく上で、チームの共通認識を持ったり、社内外の認知を向上するために、組織のブランデ
プロデザイナーによる同人誌レビューがめちゃめちゃ参考になる！【C95前編】
C95新刊をプロの視点からレビュー。 商業誌の装丁デザインを手がけて10年以上、 現在もフリーで活躍されているPOO松本氏（@POO_MATSUMOTO）が、 デザイン面でのアドバイスや皆が学んで盗めるポイントを解説しつつ コミケ新刊のレビューをしていくという、 面白くてためになるコミケ後の恒例企画です。 こちらは前編となっておりますので、後編はこちらからどうぞ。 ■注意■ レビュー、アドバイス共にあくまでPOO松本氏個人の主観・我流の技法でしかありません。 「プロが言ってたから絶対そうだ」ということはありませんし、 絶対の正解では無いのでご注意を。 まだ見ぬ作品との出会いを楽しみつつ、 参考になる！と思ったアドバイスをつまみ食いしましょう。 今回は史上最多の160作品が集まりましたので、 8夜に渡っての開催となりました。 ひとつにまとめると膨大な量になりますので、 １～４夜→前編 ５～８
Slack のロゴが新しくなりました！
本日、ブランドデザインのリニューアル計画の第一弾として、Slack では新ロゴを発表しました。Slack 社員だけでなく、ユーザーの皆さんにも愛されてきた以前のロゴ (とデザイン) をなぜ変えるのか、疑問に感じる方もいるのではないでしょうか。そこで、デザイン刷新の理由と、新しいデザインに込めた思いをご説明したいと思います。 まず、今回の変更は、なんとなく…といった軽い気持ちで行ったわけではありません！諸行無常とあるように、何事も変化というのは避けられず、自然の流れかもしれませんが、ロゴ変更の理由としては十分ではありません。ロゴというブランドの顔を変更するのは「本来のロゴの役割を果たしていない」という確固たる理由がある場合です。私たちが愛してきたロゴは、まさにこのケースでした。私たちはその事実を認め、よりシンプルでわかりやすい、ロゴとしての役割を果たす新しいデザインに進化させるため、今回のロ
デザインの役割からみる「トーン」と「マナー」
こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日（水）に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン＆マナー設計」にて登壇させていただきました。 皆さんは「トーン＆マナー」という言葉を耳にしたことがありますか？「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン＆マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン＆マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起
WEBサイトのメインビジュアルデザイン制作時の参考資料 | 野良人（のらんど）
WEBサイトの顔・メインビジュアルのデザインを考える時にザーッと読んでから着手すると良さそうだぞっと思う参考記事をまとめました。そもそものデザインコンセプトを考えてから、レイアウトパターンを検討して、色んな参考デザインを眺めつつ細部を整えていく感じの流れです。あと書籍も。 設計・コンセプト WEBサイトの設計時に考えるべき内容かもですが、サイトの目的に照らしてメインビジュアルが担うべき役割を検討する際に参考にしたい記事をピックアップ。 デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ WEBサイト全体の設計の話だが、考え方とか非常に勉強になるので読んどく。 5STEPでブランドイメージを的確に表現できるデザイン方法 | FICC BLOG | FICCのデジタルマーケティングブログ これもデザイン全般の話ではあるが、ブランドイメージを表現するためのキーワ
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends
そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイトを提供することができるなど、様々なメリットが生まれます。 今回は、2019年に流行するWebデザインの最新トレンドを一気にご紹介していきたいと思います。 2029年のWebデザイントレンドに関する記事を公開しました！最新情報を知りたい方はこちらをご覧ください。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注
デザイナーおじさんが女子力高めのデザインをするための10のアプローチ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おつかれさまです。おじさんデザイナーのみやです。 デザイナーという仕事柄、女性向けのデザインをすることがあります。 駆け出しデザイナーのときはどうすればよいのかがまったくわからず、先輩の女性デザイナーから「女子力が足りないッ！」とよく言われていました。 そこから案件をこなしていく中で、なんとなくのアプローチ方法がまとまってきたので、いくつか紹介したいと思います。 女性向けデザインを考えるにあたって 主なインプットは雑誌です。 女性向けデザインはターゲットの年齢層によって結構変わります。雑誌自体もターゲットの年齢層は絞られているので、参考にするときはその年代の女性が読むであろう雑誌を参考にするようにしてください。 年代別の雑誌タイトルをまとめてみましたので参考までに。 年代別の雑誌タイトル 10代向け雑誌 『Seventeen（セブンティーン）』 『Popteen（ポップティーン）』 『ni
“表紙あるある”の知恵がこのタグに集結！ #それっぽくなる表紙 - Togetter
🐕️ @54jpd09 今まで作った表紙だが… 一枚目：絵に文字を重ねて後は揃えとけ 二枚目：正方形で揃えとけ 三枚目：タイトル斜め、写真はぼかしてりして効果的にしとけ #それっぽくなる表紙 pic.twitter.com/SOOvvkYgFH 2018-10-24 21:34:52
Adobe XDとPhotoshopのアセット連携が便利! 快適なデザイン制作フローを実現しよう - ICS MEDIA
Adobe XDがデザインやプロトタイプのツールとして広まっていますが、Photoshopなど他のデザインツールとの使い分けや連携に悩んでいるウェブデザイナーの方も多いのではないでしょうか？ この記事では、デザインフェーズにおいてXDとPhotoshopを併用してデザインする方法を紹介します。 Photoshop単体で最後までデザインすることもできますが、XDと連携することによって以下のような恩恵を受けられるようになります。 XDの機能「リピートグリッド」で作業効率をアップ プロトタイプで実際の動作をシミュレーション URL共有でフィードバックや修正のサイクルコストを短縮 XDの強みである動作の軽快さを利用して全体の画面を見通す PhotoshopとXDを行き来してデザインする場合 Photoshopでパーツをデザインし、XDでレイアウトする方法を紹介します。 Creative Cloud
比率を考えたデザインを。比率を計算してくれる無料サービスまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのミライです。仙台出身。ジャスの意味がわかるやつは大体友達です。 比率の計算、面倒なときがありますよね……。ぼくも算数も数学も苦手なので毎日頭抱えてます……。でも計算しておけば、見栄えの担保、説得力がつく、設計構築がスムーズに、などさまざまなメリットがあります。この世のすべては数式で表せるらしいです。頭が狂いそうです。 計算するのが嫌すぎて、比率計算を簡単にしてくれるサービスをまとめたので、見てみてください。 01. 画像などに使える比率計算ツール Ratio Calculator Ratio Calculator 「16:9」「3:2」「4:3」「黄金比」を計算してくれます。 ベースの数値を入力すればすぐに結果を反映してくれます。 すでにほかのツールよりも多くの種類をカバーしていますが、もう少し幅広い種類に対応してほしいなというのと、EnterKeyを押すと入力した
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | キャリアハック（CAREER HACK）
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
無料で商用利用も可能なパーティクル表現が作れるHTML5製のデザインツール「Particle Develop」
炎・雪・煙・光など、パーティクル・システムを使って表現するようなものをウェブサイト上で無料で簡単に作成し、そのまま商用利用してしまってもOKなデザインツール「Particle Develop」が公開されています。一体どんなことができるのか使ってみました。 HTML5製のデザインツール Particle Develop - ICS http://ics-web.jp/projects/particle-develop/ これが「Particle Develop」。画面左側には自身が作成したパーティクル表現がプレビュー表示され、右にはパーティクルのテンプレートが並んでいます。記事作成時点でテンプレートは12種類あります。 試しに「Fire」というテンプレートをクリックするとこんな感じ。自身の求めるテンプレートをまず選択すればOK。 プレビュー画面の赤枠部分にある四角いアイコンは、ドラッグ＆ドロ
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もっと「売れる」文章とデザインは？ 男性と女性で異なる購買心理を理解する | ウェブ解析士会議
デザインの勉強にもなる！ロゴのデザインをさまざまな面から検証し、改善点が分かるオンラインツール -Logo Lab
