モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響

2024/02/06 287 users 余白 フォント ユーザビリティ上 モバイルファースト 悪影響

モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First ... 続きを読む

「ダークパターン」で被害46％　勝手に定期購入、泣き寝入りも ｜ 共同通信

2023/12/10 133 users 泣き寝入り JST ダークパターン コンセント 割合

消費者を混乱させ、不利な決定をするように仕組んだウェブやアプリのデザイン「ダークパターン」に関して、被害に遭った経験がある人の割合が46.1％に上ったことが、ウェブデザインなどを手がける「コンセント」（東京）のインターネット調査で分かった。消費者が泣き寝入りを余儀なくされるケースも多く、同社は注意を... 続きを読む

頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

2023/05/19 102 users WebGL ICS MEDIA 別ウィンドウ 実装 予算

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コ... 続きを読む

日本のウェブデザインの特異な事例

2022/11/26 663 users David マキシマリスト ミニマリスト 著者 ケース

sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです... 続きを読む

こんなことできるの?!ホームページ制作が楽しくなる最新オンラインツール48個まとめ - PhotoshopVIP

2022/04/28 8 users PhotoshopVIP グラフィック 短縮 案件 新ツール

「こんなことできちゃうの?!」「もっと早く知りたかった。」 この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。 時間の短縮はもちろん、面倒だ... 続きを読む

2022年はこれだ！注目のWebデザイン人気トレンド16個まとめ - PhotoshopVIP

2021/12/01 5 users PhotoshopVIP 翻訳 テクニック トレンド 許可

海外サイト DesignModo で公開された Top Web Design & UI Trends for 2022 より許可をもらい、翻訳転載しています。 2022年のウェブデザインのトレンドはどうなっていくでしょう。 手掛ける作品やプロジェクトが、1年を通して新鮮でモダンな雰囲気を演出できるために、どのようなスタイルやテクニックを知っておくと良... 続きを読む

描写から構成へ――『Every Layout』とコンポジション指向CSS／terkel.jp

2021/11/28 7 users レビュワー terkel 共著 CSS 本書

ヘイドン・ピカリングとアンディ・ベルの共著『Every Layout』が日本語に翻訳された。光栄なことに僕も出版前のレビュワーのひとりとして、微力ながらお手伝いさせていただいている。 タイトルが示すとおり、本書はCSSによるウェブデザインのうち「レイアウト」の問題に焦点を絞ったものだ。レイアウトといってもページ... 続きを読む

Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ - PhotoshopVIP

2021/04/26 183 users PhotoshopVIP ワンクリック グラフィック 案件

この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行って... 続きを読む

ウェブデザインにおけるline-heightについて | Rriver

2021/04/23 369 users Rriver line-height figma 曲者 CSS

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回... 続きを読む

Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ - PhotoshopVIP

2021/03/16 163 users PhotoshopVIP グラフィック 案件 ツール 作業

この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円... 続きを読む

ウェブデザインの余白に規則性を持たせるためのパターン · GitHub

2020/12/14 208 users GitHub 余白 パターン 規則性

$vertical-rhythm-line-height: 1.7; $vertical-rhythm-unit: ($vertical-rhythm-line-height * 1rem); h1 { margin: 0 0 $vertical-rhythm-unit; padding-bottom: ($vertical-rhythm-unit * .5); font-size: 1.5rem; line-height: ($vertical-rhythm-unit * 2); border-bottom: 1px solid gray; } p { margin: 0 0 $ver... 続きを読む

グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツをまとめ - GIGAZINE

2020/09/09 375 users GIGAZINE デザイナー グラフ グラフィックデザイン

ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるよ... 続きを読む

ウェブデザインやクリック率を改善するためにGIGAZINEでやっているA/Bテストとは？ - GIGAZINE

2020/09/03 14 users GIGAZINE ユーザビリティ コンバージョン パターン

画像や文章のパターンを複数用意し、それをウェブサイト上で入れ替えて表示させてユーザーの反応を見る「A/Bテスト」は、ユーザビリティやコンバージョンを向上させる方法として利用されます。GIGAZINEでは常時複数のA/Bテストを行っており、「どのような見せ方、やり方の効果が高いのか？」という調査を行っているので... 続きを読む

ウェブページを読む人の視線はどう動くのか、ウェブデザインやコンテンツ作成に役立つ調査結果が公開中 - GIGAZINE

2020/06/25 20 users GIGAZINE 見方 目線 文章 ウェブページ

ウェブページを見ている人の目線の動きをトラッキングした2006年の調査で「インターネットで公開されている記事の文章を端から端まできっちり読む人は極めてまれ」ということが示されました。それから10年以上が経過し、インターネットは大きく変化しましたが、人のウェブページの見方は変化したのか？ということで、新... 続きを読む

マスクの作り方を無断で…イトーヨーカドーが謝罪- 名古屋テレビ【メ～テレ】

2020/02/10 83 users イトーヨーカドー デレ 謝罪 マスク マスク不足

無断でイラストを使用したとして、大手スーパーのイトーヨーカドーが謝罪です。 問題が指摘されたのは、埼玉県内にあるイトーヨーカドーの2店舗で掲示された、マスクを手作りする方法を説明したイラストです。このイラストは元々、ウェブデザインを手掛ける女性が作成したもので、マスク不足を心配してツイッターに投稿... 続きを読む

無料でウェブデザインに最適な配色実例をそのままコピペできるようにした「Happy Hues」レビュー - GIGAZINE

2019/12/16 18 users GIGAZINE 配色 デザイナー 心理 統一感

色は人の心理に働きかけることが知られており、デザインに何色を使うかは重要な問題です。特に、異なる色を使いつつ統一感を持たせるのは至難の業で、一歩間違うとまとまりやメッセージ性のない配色になってしまうことも。そこで、プロのデザイナーがウェブデザインのさまざまな配色実例をそのままコピーできる「Happy H... 続きを読む

ウェブデザインから退屈な「調整」の繰り返しをなくすFigmaの「Auto Layout」機能 | TechCrunch Japan

2019/12/15 15 users figma Sequoia Auto Layout 手動 調整

Index Ventures、Sequoia、Greylock、Kleiner Perkinsなどの投資家から、8300万ドル（約90億円）近くを調達したデザインツール開発会社のFigmaは、米国時間12月5日にデザイン作業から退屈な「調整」の繰り返しをなくす「Auto Layout」という新機能を発表した。 デザイナーなら、コンポーネントのコンテンツサイズを手動... 続きを読む

サンプル例でわかる！注目したい2020年のWebデザイントレンド8個まとめ - PhotoshopVIP

2019/11/18 68 users デザイ PhotoshopVIP 99designs 翻訳

海外サイト 99designs で公開された 8 innovative web design trends for 2020 より許可をもらい、翻訳転載しています。 この記事では、これから2020年に注目したいウェブデザインの最新トレンド8個をピックアップ、予想しています。「アッと驚かすデザインをつくりたい。」そんな思いにさせてくれる、たくさんのデザイ... 続きを読む

2019年6月第1週号 1位は， もう終わったウェブデザインのトレンド，気になるネタは，アップル，約4年ぶりに「iPod touch」新モデル--6色展開で2万1800円から：週刊Webテク通信｜gihyo.jp … 技術評

2019/06/06 21 users アップル gihyo.jp 技術評 iPod touch ネタ

gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2019年6月第1週号 1位は， もう終わったウェブデザインのトレンド，気になるネタは，アップル，約4年ぶりに「iPod touch」新モデル--6色展開で2万1800円から 週刊Webテク通信 2019年6月第1週号 1位は， もう終わったウェブデザインのトレンド，気になるネタは，アップ... 続きを読む

Webデザインをセンスに頼らず、感覚で判断せず、ロジカルに取り組むためのデザイン書 -ウェブデザインの思考法 | コリス

2019/05/31 104 users コリス ロジカル ノンデザイナー センス 善し悪し

ウェブデザインの善し悪しや品質は、感覚的に語られ決定されてしまうことがあります。例えば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういう経験はありませんか？ ウェブデザインの要素や見せ方における機能性・情緒性をロジカルに解説したお勧めのデザイン書を紹介します。ノンデザイナー... 続きを読む

Yahoo! JAPANトップで見るウェブデザインの歴史 - Yahoo! JAPAN Tech Blog

2019/05/30 297 users Yahoo JAPANトップ 歴史

デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たっ... 続きを読む

シンプルなウェブデザインが好き。ブログデザインで参考になったオススメの書籍まとめ

2019/04/10 13 users 書籍まとめ 参考 おすすめ ブログデザイン

春になると「ブログのデザイン変えたいな〜」と、ブロガーは思いがち。 トバログは2015年からブログを始めて、これまで数回デザインをいじってきた。最初はいわゆるブロガーのブログの構造をひたすら眺めて「これが正しいブログのあり方であろう」と感じるデザインにしていたのだけれど、2年目以降で「せっかく自分のオ... 続きを読む

無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー - GIGAZINE

2019/03/04 183 users GIGAZINE 一目 ナシ アリ フリーペーパー

ウェブデザインやフリーペーパーといった物理的なデザインをする際には、人に訴える力を持つ「見やすい」色の組み合わせを見つけ出すことはかなり重要です。背景色と文字色の組み合わせが「アリ」なのか「ナシ」なのかを一目でわかるようにする「Accessible Brand Colors」を使えば、悩みがちな色の組み合わせを直感的に... 続きを読む

HTMLスニペット数1100以上！ウェブ制作の必要パーツをカテゴリごとにまとめた Free Frontend - PhotoshopVIP

2019/01/29 92 users PhotoshopVIP インスピレーション プログラマー

ウェブサイトの制作でアイデアが欲しいとき、他のデザイナーやプログラマーが作成した作品からインスピレーションが湧いてくることがあります。 ウェブデザインに必要なパーツをカテゴリー分けし、1100種類を超えるHTML/CSS/JSスニペットをコレクションしている Free Frontend を、今回はご紹介します。 ますます重要に... 続きを読む

2019年の注目トレンド早わかりガイド！ウェブやグラフィック、ロゴなど各ポイントをまとめてチェック - PhotoshopVIP

2019/01/07 21 users PhotoshopVIP グラフィック 本年 動向 ウェブ

あけましておめでとうございます。 お正月気分もすっかりなくなり、いつもの日常がはじまっている方も多いかと思いますが、2019年、本年もどうぞよろしくお願いいたします。 今回は、2019年に注目したい各デザイントレンドを、ポイントごとにまとめてご紹介します。ウェブデザインの動向はもちろん、グラフィックデザイ... 続きを読む