基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。

この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac

コ・デザインのためのシンキングシート

Google Maps API（Javascript API）について書く記事、第4弾です。 今回はお待ちかねの（？）地図デザインのカスタマイズについてお届けします。 Google マップをWebサイトに掲載するときに気になるのがサイトデザインとの相性。デフォルトの見た目では浮いてしまう場合もありますよね。 Google Maps APIでは、地図上の要素それぞれに対して細かいカスタマイズが可能です。マスターすればかなりオリジナリティのあるデザインにすることができますよ。 カスタマイズのイメージを掴むには、Google マップのカスタマイズ例を集めたギャラリーサイト「Snazzy Maps」などを見るのがおすすめです。 色別や、「シンプル」「ダーク」などのイメージごとに多くのサンプルが載っています。 また、Snazzy Mapsでは掲載されているデザインをそのままコピペで利用可能です。（方

すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。 反転したカラースキーム vs 通常のカラースキーム トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。 特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説

↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x

From Inspiration to Creation: Ignite Your Design Journey with Color Designer Welcome to the most comprehensive color tools platform. Unleash your creativity using color wheel, devise harmonious palettes with the Color Palette Builder, and create depth with the gradient options. It's a designer's playground. Enjoy exploring!

フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ

多くの会社はWebで強力なプレゼンスが必要な理由を理解しているものの、しばしばユーザーをそのプロセスから放置しています。競争が激しいデジタル世界において、企業はシームレスなユーザー体験を保証するためにできる限りの努力をしなければなりません。 私たちの生きるデジタル時代において多くの場合、企業のWebサイトは人々がそのブランドに触れる最初の接点となります。人々は実際の店舗に（もしあるならば）入るはるか前にWebサイトを訪れます。Chain Store Ageによると、顧客の39%は、Webサイトで選択肢が多すぎると不満を覚え、離脱するそうです。 それでは、企業はどのようにしてデジタルプラットフォームを通じて良好な体験を提供し、ユーザージャーニーを充実させ、購買の意思決定に影響を与えられるのでしょうか？ 良いUXの秘訣はインタラクションデザインにある インタラクションデザインは、ユーザーをもて

インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。実際のアプリを実例に紹介しながらインタラクションデザインの概念についても理解しましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。 「イ

シンプルにデザインする方法を学び、なぜデザインが過度に複雑になってしまうのかを知りましょう。もっとも成功した企業が作り出し、広く使われているプロダクトの多くは明らかにシンプルなものです。 また、シンプルさは一部の企業が競合よりも成功している主な理由でもあります。Googleの検索エンジンや、AppleのiPhone、WhatsAppメッセンジャー、よくできている天気ウィジェットなどは、シンプルさが表に出ている人気プロダクトのほんの一例です。 この記事ではシンプルさを見分けて獲得する方法と、シンプルさがすぐれたUIをもたらす理由を紹介します。 シンプルさとは何か？ 今シンプルなものが大流行しています。シンプルさは、成功した企業とそのファンの多くに支持されているデザイン哲学です。大成功を納めているApple社はデザインのシンプルさを求めて常に戦ってきました。米国出身の起業家であり投資家でもあっ

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 生年月日の表記方法は国によって異なります。さらに、生年月日のフォームは年、月、日という３つのデータで構成されているためわかりにくくなりがちです。生年月日の入力フォーマットがわかりにくい場合、ユーザーを苛立たせることになります。 わかりにくいフォーマット ユーザーは、誕生月が最初に来るフォーマット（月/日/年）か、誕生日が最初に来るフォーマット（日/月/年）のどちらかに慣れています。そのため、フォームがいつものフォーマットと異なると混乱してしまいます。 生年月日でユーザーがよく見るフォームは、「月/日/年」か「日/月/年」です。「MM」が「月」、「DD」が「日」を表していることを知っているユーザーもいますが、混乱したり無視するユーザーもいます。

デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情

こんにちは、デザイナーの藤田です！ 毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。 油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました！ よろしければ皆様もご覧ください。 2018年気になるWebデザイントレンド 画像を揺らす デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。 アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね！ http://www.themustafacelik.com/ http://culture.basicagency.com/ パララックス 手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は４〜５年

2016年12月14日 インスピレーション, 色彩 PANTONEはアメリカ、ニュージャージー州に本社がある色見本帳の販売や色に関わるさまざまなサービスを提供している会社。Webデザイン、プロダクトデザイン、ファッションデザインなど、多くの業界に影響を与え続けています。PANTONEはこの時期になると毎年「来年の色」を発表しており、2017年の色は爽やかな緑色の「Greenery」に決まりました。今回はその「Greenery」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Greenery」ってどんな色？ イメージ動画にも使われているような、春の新緑を思わせる鮮やかな黄緑色のGreenery。「爽やかで活力のある、新しい始まりを象徴する色」と説明されています。なんだか見ているだけでワクワクしてきちゃいますね！ 色の具体的な数値は以下の通り： PANTONE：15-

画像をグレースケールにする方法 まず最初にグレースケールにしたい画像や写真を読み込みます。 編集したい画像ファイルを直接キャンバス内にドロップすると、画像ファイルを開くことができます。 メインメニュー、もしくはキャンバス下部にあるファイル選択ボタンからも画像を読み込むことができます。