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

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)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです... 続きを読む

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 デザイナー グラフ グラフィックデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「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 を、今回はご紹介します。 ますます重要に... 続きを読む

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

2018/07/09 392 users GIGAZINE 主眼 焦点 アプリケーション やり取り

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

デザイナーが押さえておきたい、2018年のウェブデザイントレンド6個まとめ【完全ガイド】 - PhotoshopVIP

2018/04/19 398 users PhotoshopVIP 復活 現状 レトロスタイル 影響

2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、 2018年にもっとも影響を及ぼしている、6つの最新ウェブデザ... 続きを読む

海外と比べて日本のウェブデザインが20年前から進歩していないように見えてしまう3つの理由とは？ - GIGAZINE

2018/01/30 82 users GIGAZINE 俳句 寺院 一方 デザイナー

By PriceMinister 限りなく無駄を排除してシンプルな美を追い求めるような俳句やわびさびの考え方は世界的にも人気があり、また寺院に見られるような伝統建築や現代建築は世界中のデザイナーからも高い評価を得ています。しかし一方で、日本や中国、韓国のウェブデザインは世界的にそれほど注目されておらず、どころか日本のウェブデザインの多くは1998年頃から変わっていないようにも見えると、アジアの文化... 続きを読む

海外と比べて日本のウェブデザインが20年前から進歩していないように見えてしまう3つの理由とは？ - GIGAZINE

2018/01/30 82 users GIGAZINE 俳句 寺院 一方 デザイナー

By PriceMinister 限りなく無駄を排除してシンプルな美を追い求めるような俳句やわびさびの考え方は世界的にも人気があり、また寺院に見られるような伝統建築や現代建築は世界中のデザイナーからも高い評価を得ています。しかし一方で、日本や中国、韓国のウェブデザインは世界的にそれほど注目されておらず、どころか日本のウェブデザインの多くは1998年頃から変わっていないようにも見えると、アジアの文化... 続きを読む

iPhone Xを購入せず、無料でウェブページの表示確認を行う方法 (macOS) - Qiita

2017/09/20 72 users Qiita MacOS 必須 ウェブページ ディスプレイ

今年10月に発売が予定されている iPhone X は、その独特なディスプレイの為にセーフエリアを意識したウェブデザインが必須です。iPhone Xで意図せぬ表示にならないように実機の購入が必要だと考えるかもしれませんが、 実はmacOSユーザーであれば、iPhone Xを購入せず無料でウェブページの表示確認を行えます 。このエントリーでは、iPhone Xでの表示確認方法について紹介します。 ▲... 続きを読む

Adobeが超絶役立つPhotoshop初心者向けのチュートリアル動画集「3, 2, 1… Photoshop!」を公開 - GIGAZINE

2017/08/07 72 users GIGAZINE プロフェッショナル Photoshop

Photoshopはウェブデザインにおいてトップクラスの画像加工ソフトウェアであり、初心者から多くのプロフェッショナルにまで愛用されています。その機能が多岐にわたるため、専門家でも全機能を自在に使いこなすのは難しいほどなのですが、Photoshopの提供元であるAdobeが初心者向けにPhotoshopの使い方を説明するチュートリアル動画の再生リスト「 3, 2, 1... Photoshop! ... 続きを読む

縦書きでレスポンシブなブログを作った - yuhei blog

2017/05/11 122 users 縦書き yuhei blog Next.js ウェブサイト

2017 - 05 - 08 縦書きでレスポンシブなブログを作った 趣味で会社の人のサイトを作った 。縦書きでレスポンシブなブログ。 prismic.io と Next.js で作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実... 続きを読む

商用利用可能！フリー(無料)ダウンロードできるアイコン素材50個まとめ 2017年3月度 - PhotoshopVIP

2017/03/02 54 users デザイ PhotoshopVIP 絵柄 フラットスタイル 役割

ウェブデザインやアプリ用デザインを作成するときに、シンプルな絵柄や絵文字が重要なデザイン要素のひとつで、利用には細心の注意を払う必要があります。アイコン素材は見た目を良くするだけでなく、サイトやアプリを使いやすしてくれる役割があります。 今回は、 無料ダウンロードできる良質アイコン素材セットをまとめてご紹介 します。アウトラインスタイルのエレガントな素材から、フラットスタイルの鮮やかで大胆なデザイ... 続きを読む

Webデザイン勉強の参考にしたい、魅力的なサイト35選 2017年2月度 - PhotoshopVIP

2017/02/24 96 users PhotoshopVIP アニメーション レイアウト 発達

目まぐるしく変化するウェブデザインは、技術の発達によりこれまでは難しかった表現も可能になってきています。ユーザー主体とした体験型サイトなども増え、アニメーションやレイアウトなど新しいデザイン要素を利用することで、より魅力的でインタラクティブなサイトデザインに仕上げることができます。 そんなウェブデザイン制作アイデアの参考にしたい、クオリティの高いWebサイトをまとめてご紹介します。Webデザインや... 続きを読む

コピペ自由！美しいグラデーションを180種類揃えた WebGradients - PhotoshopVIP

2017/02/21 67 users PhotoshopVIP グラデーションカラー 配色 ボタン

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフロー... 続きを読む