【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
インド在住のライター兼エンジニアのニティン・シャルマ（Nitin Sharma）氏（詳細は同氏LinkedInプロフィールページを参照）がMediumに投稿した記事『GPT-4oはクレイジーだ―思わず言葉を失うような（信じられない）6つの使用例を紹介』では、GPT-4oの実用的な使用例が紹介されています。 シャルマ氏が紹介するGPT-4oの使用例は、以下の表の通りです。 GPT-4oの6つの実用的な使用例
ユーザーの声を大切にする すべての組織のために。 toitta（トイッタ）は、デザインリサーチ・マーケティングリサーチに携わるチームのために考案された、インタビュー後の発話分析を支援するソリューションです。 リサーチを通してインサイトの発見・仮説の精緻化を実現するまでのプロセスにひそむ課題を、「生成AIを活用した発話の構造データ化」で解決します。 インタビューの録画・音声データをAIで処理し、データを分析しやすい形に整えることで、ハードルの高いインタビュー分析を強力にサポートします。
WEBデザイン制作のなかでよく耳にするのが「作業時間」の問題。 制作会社に就職したら、仕事量が多くて残業が多くなりがち。 フリーランスや副業でデザインをしている方は、時間がかかるせいで時給換算したときに安くなりがち。 とのことです。 そこで今回は、全WEBデザイナーさんに見ていただきたい、あなたの作業効率をアップさせるのに役立ちそうなAIツールを18個まとめました。 今回ご紹介するのは 画像の編集・加工に役立つAIツール WEBサイトの制作に役立つAIツール プレゼンテーション資料作成に役立つAIツール リサーチに役立つAIツール タスク管理や生産性向上に役立つAIツール の5種類。 それぞれの特徴はこんな感じです。 ※表は右にスクロールできます→ ツール名 画像の編集 加工 WEBサイト 制作 プレゼンテーション 資料作成 リサーチ タスク管理 生産性向上 Canva ◎ – – – –
先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-contentとmargin-inline:autoでセンタリングすることで、1行の場合は中央寄せ、複数行の場合は左寄せといった実装が可能となります。
Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ビューポート内のコンテンツの幅を制限する 2. テキストのサイズを大きくする 3. 行間のスペースを広げる 4. 画像のサイズを制限する 5. コンテンツ内のテキストの幅を制限する 6. 見出しをよりバランスよくする 7. ページスタイルに合わせたフォームのカラー 8. テーブルの表を分かりやすくする 9. テーブルのセルとヘッダのスペース 10. アニメーションと動
本記事は Design Week 2023 1日目の記事です。 🌈 告知記事 ▶▶ 本記事 ▶▶ 2日目 💐 こんにちは、Webデザイナー3年目の馬場です。 突然ですが、 「メンフィス」「グラスモーフィズム」「アイソメトリック」... 皆さんはこれらのワード、いくつ知ってますか？ もしくはデザイナーの方は、 「このデザイン、最近良く見るけど呼び名とかあるのかな…？」 「他人に言葉で『◯◯のデザイン』と説明したいけど名前がわからない...。」 と思ったことはありませんか？ 私は定期的にWebデザインのトレンドや用語などを調べてインプットしているのですが、 今までよく目にしていたデザインスタイルや模様などに「こんな名前があったんだ」と、恥ずかしながら初めて知ることが多々あります。 今回はそういったデザインスタイルの呼び名を集めましたので、参考サイトや使用事例と共にご紹介していきます。 メン
デザイナーも身につけておきたい意図を引き出す質問の秘訣
質問の仕方で変わることがあるデザイナーにとって、プロダクトマネージャーやエンジニアとの効果的なコミュニケーションは、良いデジタルプロダクトを生み出すために欠かせません。ドキュメントや打ち合わせを通して施策への理解を深めていきますが、情報のインプットだけでは分からないことがあります。そこで、意図を明らかにするために質問をするわけですが、ただ「なぜですか？」と尋ねても望む返答が得られない場合があります。では、どのように質問すれば良いのでしょうか。 私自身、まだ完全にできているわけではありませんが、質問するときの秘訣がいくつかあります。 相手の見解に興味を示す良い質問をするために最も重要なのは、純粋な好奇心です。プロダクトマネージャーやエンジニアの見解に興味を持ち、もっと知りたいと思う気持ちが、良い質問を生み出します。抽象的に聞こえるかもしれませんが、形式的な質問を覚えるより、ずっと効果的です。
これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ
堀元 見 @kenhori2 通販サイトでは、送料を隠してユーザーを騙すと売上が21%増えるらしい。 バカ高い手数料や送料が後から発覚するクソ体験あるじゃないですか。あれ、合理的な経営判断みたいです。 堀元 見 @kenhori2 『ダークパターン 人を欺くデザインの手口と対策』p.119より引用。 この本すごい。ダークパターン（人を騙すようなWebデザイン）の実例やその破壊力を余すところなく描き切っている。 名だたる有名企業の実例も豊富で震えた。（ツリーで紹介します） valuebooks.jp/bp/VS0089940712 pic.twitter.com/ECrqnJNat4
お久しぶりです。東京の端くれでひっそりデザイン会社を営むおりです。 最近、協力先企業においてデザイナーの採用をお手伝いすることが増えてきたのですが、その際に見えてきた最近のWebサービスのUXデザイナーの傾向について、やや引っかかる部分があったので、またぞろ筆を取った次第です。 UIやUXという言葉は広く一般に浸透してきたこれはとても喜ばしいことです。特にゲームなどの影響もあり、一般ユーザーであってもUIとUXの概念や関係性を正しく理解し、言及することが多く観測されるようになりました。 で、広く一般に浸透してきたということは、それらを作るデザイナーも増えてきたのかな？と思っていたのですが、どうやらそうでもないようで採用活動には大変苦戦しているという状況でございます・・・。 最近のUXデザインという業務の認識について募集要項上で職種としては、インターフェースの画面設計を独力で完結して欲しいの
「日頃の作業をどうにか楽にしたい、できることならだれかやってほしい」と思ってしまうほど自分にあまい筆者が、制作時間の短縮や効率化アップにつかえる新ツールやデザイン素材をまとめました。 すべて手作業だと時間のかかるCSSスタイリングや、スキルも必要な手描きイラストを用意したり、「このツール、早く知りたかった」と思った素材やツールが揃っています。 日頃のワークフローに活用して、デザイン制作の新ルールを一緒に見つけてみませんか。 コンテンツ目次Web便利ツールデザインツールFigma・アイコンツールユニーク・面白ツール Web便利ツール The good colors – Full spectrum – OKLCH 注目の色「OKLCH色空間」によるカラーパレット作成ができるツール。一般的なLCHとOKLCH色の比較の通り、より「いい感じの色合い」で、明度と彩度のトーンがあった美しい配色を生成し
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ・スピードを変更できる優れものです。 HTML-SpinnerElem -GitHub HTML-SpinnerElemの特徴 HTML-SpinnerElemのデモ HTML-SpinnerElemの使い方 HTML-SpinnerElemの特徴 HTML-SpinnerElemは、スピナーにアニメーション画像を使用していることにうんざりして、画像なしでHTMLでカスタマイズ可能なスピナーを実現するために作成されたものです。 HTML-SpinnerElem HTMLでカ
今回は、自社で内製した「比較ビズ」のランディングページ（以下、LP）を、LP制作のプロフェッショナルである片岡様に依頼しました。この記事では、LPのビフォーアフターに加えて、実際にいただいた修正案や検証結果をまるごと公開します。 詳しいポイント解説もついているため「LPデザイン改善を検討している方」「WebデザインやWebマーケティングを勉強中の方」はぜひご覧ください。
Webマーケティングを学ぶのにフォローしたいおすすめインスタアカウント12選！企業Web担当者向け：2024年7月版
このインスタアカウントは、Webマーケティングに関するインタビュー記事などを配信する「MARKETIMES」が運営しています。 Webメディアの記事を紹介するのではなく、インスタグラム用に統一したフォーマットでコンテンツを作成しています。 内容も「〇〇とは？」や「Webデザイン基本用語」など初心者向けの投稿が多くなっています。 →「Webマーケティングの教科書 by MARKETIMES」のインスタアカウントはこちら Webサイト運用を学べるインスタアカウント4選 SEO対策のプロ｜ランクエスト 「ランクエスト」は株式会社eclore（エクロール）が提供するSEOコンサルティングサービスの名称です。 こちらのインスタアカウントでは、タイトルやディスクリプションといったSEOに関する基礎知識やSEO対策で必要なツール、サイト構造の最適化などSEOに関する情報を提供しています。 4,200社以
Figmaを使ったUIデザインの基本を詰め込んだ『Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン』を7月23日（火）に発売
インプレスグループでIT関連メディア事業を展開する株式会社インプレス（本社：東京都千代田区、代表取締役社長：高橋隆志）は、Figmaを使ったUIデザインの基本を詰め込んだ実践書『Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン』を2024年7月23日（火）に発売いたします。 ■Figmaを使ったUIデザインの第一歩 近年、Webサービスやアプリにおいて、ユーザーにとって自然で使いやすいインターフェースを設計する「UIデザイン」が注目されています。本書は、人気デザインツール「Figma」を使ってWebサービスやアプリのコンポーネント（要素）やアイコンなどのUIデザインを学ぶ実践書です。 ■コンポーネントの作成から実装まですべて学べる 前半ではFigmaの基本操作を学びます。UIコンポーネントとスタイルを集めた本書オリジナルのUIキット「Stockpile UI（ストックパ
もう迷わない！OpenTypeフォントとTrueTypeフォントの使い分け｜ヒラギノフォント公式note
フォントを購入するときや使うとき、フォントフォーマット（フォント形式）の違いについて悩んだことはありませんか？OpenTypeフォントとTrueTypeフォントでどちらを選ぶか、悩んだことがあるデザイナー・プログラマーの方もいらっしゃるかもしれません。 OpenTypeフォントとTrueTypeフォントはどちらにも誕生の経緯や役割があり、特定のニーズや用途によって適切なフォーマットが異なります。結論からいえば、OpenTypeフォントはタイポグラフィ・組版などのデザイン性が重視される領域、TrueTypeフォントは組込みなどの互換性や汎用性が求められる領域で採用されることが多いといえます。そしてOpenTypeフォントとTrueTypeフォントから選べる場合は、ご自身の目的や用途に合わせてフォーマットを選ぶことが重要となります。では、なぜフォントフォーマットの違いが生まれたのでしょうか。ま
おしゃれな店舗/美容室/観光サイト向けWordPressテーマ LIQUID BLOOM New ブロックテーマ フルサイト編集 スタイル対応 おしゃれな店舗/美容室/観光サイト向け ブロックテーマ デモ ダウンロード 安心継続サポートプラン <$mt:Include module="お知らせ"$> <$mt:Include module="テーマの特長（ブロック）"$> ブロックテーマとは ブロックテーマは、ヘッダー、コンテンツ、フッターなど、サイトのあらゆる要素を編集できる WordPressの最新機能フルサイト編集（FSE）に対応したブロックベースのテーマです。 フルサイト編集機能を利用するためには、ブロックテーマが必須です。 ノーコードで 自由自在に こだわり編集 デザインに迷わない フラットな要素を取り入れた、シンプルで分かりやすいデザイン。 余白を多く設けることで、心地の良い雰
2024年7月25日 AI, Webデザイン, 便利ツール AIはデザインやイラストを生成してくれるだけではありません。ファイルをアップロードすれば、その制作物の説明やレビューもしてくれます。その機能を使って、自分の作ったデザインのブラッシュアップをしてみましょう！ ↑私が10年以上利用している会計ソフト！ 無料ユーザーも OK！ChatGPT を活用する準備 様々な AI がありますが、私がメインで使っているのはChatGPTなので、今回はこちらを使った方法を紹介します。ChatGPT はチャット感覚で質問した内容に答えてくれる AI です。より精度の高い有料プランもありますが、無料でも利用できます。さっそく右上の「Sign up」から登録しましょう。 注意点として、無料プランの場合、機能の利用に制限があります。ファイルのアップロードや上位モデルの GPT-4o は一定回数利用すると制限
vim-jp ラジオ オフィシャルサイト制作の舞台裏！
この記事はVim 駅伝の 7/22 の記事です。 また、この記事は デザインを担当した 輪ごむ さんとの共同執筆記事です。 はじめに 2024年7月8日月曜12時、ポッドキャストラジオ番組「 エンジニアの楽園vim-jpラジオ 」がAuDee（TOKYO FM）公式番組として配信開始されました。 本記事では、この vim-jp ラジオの Landing Page(LP) 制作の舞台裏を紹介します！ デザインや技術的なポイントなど、様々な視点から制作のポイントを紹介します。 デザインについて (by 輪ごむ) コンセプト ロゴから以下のようなイメージを膨らませてデザインを考えました。 夜 バーみたい わいわいとした雰囲気 ネオン調 これらのイメージを頭の片隅に置いて大量の web サイトや LP を大量にインプットしてなんとかひねり出したのが今回完成した LP になります。 デザインのレビュ
これからWebマーケティングを始めたい、または思うように成果が出ないことに悩んでいてあまり費用をかけずに独学でWebマーケティングを学びたい担当者の以下の課題にお答えする記事です。 独学でWebマーケ ... ポッドキャストでWebマーケティングを学ぶメリット ポッドキャストとは、インターネット上で音声または動画によるコンテンツを定期的に配信する仕組みまたは番組のことです。 収録された音声が様々なプラットフォームに配信されることでユーザーが番組を視聴することができます。 配信サービスを利用するとダウンロードして繰り返し聞いたり、新しいコンテンツが配信された時に通知を受け取ることができます。 ポッドキャストを活用してWebマーケティングを学ぶメリットとしては以下の4点が挙げられます。 移動時間でも学ぶことができる 現在ポッドキャストはWebブラウザの他、スマートフォンアプリで気軽に聞くことが
Tweet Pocket 日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを
えにしテックさん15周年に寄せて
株式会社えにしテックさんが、2024年7月3日に創立15周年を迎えられました。それを記念して「えにしテック15周年記念カンファレンス」が2024年6月29日に札幌で開催され、行く気満々だったのですが、家庭のイベントと重なってしまい泣く泣く参加を断念。代わりにお祝いメッセージをお送りさせていただきました。 カンファレンス当日はメッセージを壁に貼っていただいたのですが、僕のメッセージは色々あって思いの他長文になってしまい、デザインの体裁を崩してしまって申し訳ないです かなり個人的なメッセージなのでアレなのですが、あんなに長く何を書いてたの？と聞いてくれる方がいたり、顧問の:@kakutani: 角谷さんの勧めもあり、メッセージをフィヨルドブートキャンプブログで公開することにしました。 えにしテックの皆様、 15周年おめでとうございます！ 株式会社ロッカ（フィヨルドの社名が少しまえに変わりました
広島県尾道市にあるしまなみブルワリーの公式ブランドサイトです。王道のラガースタイルのど真ん中を突き詰めた「ストライピルスナー」をはじめ、１杯目専用のラガー「ファーストラガー」や季節のフルーツを用いたデザートビール「しまなみキャット」などしまなみ海道をのぞむ尾道から個性豊かな商品を展開しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
米政府系サイトの常識を変えた「デザインシステム」革命
GPT-4oはクレイジーだ―思わず言葉を失うような（信じられない）6つの使用例を紹介 | AI専門ニュースメディア AINOW
FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
toitta（トイッタ） - ユーザーの声に向き合える発話分析ソリューション
WEBデザイン制作の作業に役立ちそうなAIツールを列挙してみた
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
こんな名前があったとは！ デザインスタイルの呼び名まとめ - NRIネットコムBlog
通販サイトでバカ高い手数料や送料が後から発覚するケースは実は合理的な経営判断という話→売上が増えるダークパターンらしい
最近のUXデザイナー志望者の傾向とWebディレクター不要論について｜おり
使うだけで時短になるWeb、デザイン制作の新ツール・フリー素材50選
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった｜よつくら
CPAが0.9万→0.6万に改善！プロのLP改善プロセスをまるっと公開
おしゃれな店舗/美容室/観光サイト向けWordPressテーマ | LIQUID PRESS
ChatGPTでデザインのレビューをしてもらおう
Webマーケティングを学ぶのにおすすめのポッドキャスト番組10選！：2024年7月版
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
しまなみブルワリー公式ブランドサイト