「CTAボタン」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。 はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。 今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！ パターン別 CTAボタン一覧サイト閲覧者に特定の行動を促すよう誘導する（Call to Action）ためには、CTAボタンに視線を集める必要があります。 そこで今回は「目に留まりやすいCTAボタンにはどんな特徴があるのか？」という観点で、見つけた特徴別にCTAボタン周りのデザインを一覧化しました。 💡差別化された背景色CTAボ
採用サイトのための撮影術～社員や職場の魅力を引き出す写真を撮るために | knowledge / baigie
デザイナーの池田です。 ベイジといえばBtoBサイトの印象があるかもしれませんが、実は採用サイトも多く手掛けています。 採用サイトの案件では、ほぼ確実に撮影が発生します。そのため、担当するデザイナーは、撮影にも立ち会い、ディレクションする必要が出てきます。 撮影といっても、何を撮るかによって撮り方も進め方も変わりますが、採用サイトを含む採用目的の撮影となると、以下の条件が前提になってきます。 モデルは社員（プロのモデルではない） モデルは通常、仕事の合間に撮影に参加 日常的な服装やメイク オフィスなどの職場が撮影場所 非日常的な演出より日常の再現 求職者に職場のリアルな雰囲気を伝えるのが一番の目的になるため、日常の自然な風景をカメラに収める必要があるのと、モデルが一般の会社員になるため、スムーズかつ短時間で撮影が済むようにナビゲートしなければなりません。 本記事は、私たちが採用サイトの撮影
プログラミング苦手なデザイナーが、GPTを使って業務用Figmaプラグインを作った｜gao
こんにちは、Ubie プロダクトプラットフォーム本部でプロダクトデザイナーをしている永尾です。GPTを使って、初めてFigmaプラグインを作ってみました。ちなみに、僕はHTMLやCSSなら多少書けますが、いわゆるプログラミングらしいことは苦手です。 きっかけUbieでは様々な病気や治療に関するコンテンツを医師やデザイナーやコンテンツ編集者、オペレーターがチームとなって制作しています。一般的な病気の説明だけでなく、治療フェーズごとの選択肢や生活における困りごとなど、病気にまつわる様々な情報を提供しています。それと並行して、執筆した文章、作成した図やイラストを効率的に入稿する仕組み作りも欠かせません。今回作ったFigmaプラグイン「Figma to Markdown」はWebコンテンツを入稿するオペレーターのささやかな悲鳴から生まれました。 社内のコンテンツ管理ツールは、非デザイナーでも扱いや
TikTokのUIとインタラクションの観察｜鈴木慎吾 / TSUMIKI INC.
今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間：2024/1/22 - 1/29 使用環境：iPhone 15、iOS17 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動（視聴時間やスキップなど）に応じて次の動画がレコメンドされ続けます。そのため利用者はフォロー、いいね、コメントなどの主体的なアクションを一切しなくても、フィードをスクロールするだけで自分好みのコンテンツが表示され続けます。 動画フィードでは利用者の視聴行動に応じて動画が次々とおすすめされるTwitterやInsta
ChatGPTの活用方法（CSS編） | techlab / baigie
今やウェブ制作の現場ではChatGPTが欠かせないツールとなってきている。私自身、業務で積極的に使っており、必要不可欠な存在となった。プログラミング全般にわたるサポートはもちろんのこと、CSSコーディングにおいてもChatGPTを大いに役立てている。今回は、CSSコーディング時にChatGPTをどのように使っているかを紹介したい。 CSSコーディング時の課題 テキスト検索だけでは解決策が見つけにくい ウェブ制作を行う上で、CSSのデザイン調整は日常茶飯事かと思う。ただ、CSSにおいては「テキスト検索だけでは解決策が見つけにくい」と感じたことはないだろうか。 たとえば先日、以下のようなデザイン崩れを発見した。セルの縦列の幅を統一する必要があったが、テキストの長さによって横幅にバラつきが生じていた。 これまでは検証ツールを使ってコードを調査していたがこれでは時間がかかるし、やや面倒。また、検索
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
【事例付き】バナー広告のデザインがイケてないときに見直したい4つの基本｜アナグラム株式会社
まず最初に下のバナー広告をご覧ください。 デザインがバラバラとしていてまとまりがなく、なんだかイケてない印象を受けるのではないでしょうか。 このバナー広告を簡単な基本原則に基づいて修正してみましょう。 全体に統一感が生まれ、テキストなどの情報をスッキリとまとめることができました。 このようにデザインの基礎知識を身につけるだけで、バナー広告の印象を大きく変えることができるようになります。 「作ったバナー広告がなんだかイケてない……」 「バナー広告を自分でさくっと作りたいけど、時間がかかる……」 「デザイナーから上がってきたバナー広告が微妙で修正したいけど、どこを指摘したらいいのかわからない……」 本記事ではこのような悩みをもつ、バナー広告を発注したり自ら作る機会のある方々に向けて、デザインの４つの基本原則とバナー広告作りのコツをご紹介します。 まずはこれだけ「デザインの基本原則」 先ほどの修
#3-5 デザイン思考は「はやすぎる」（UX戦略の教科書）｜小城 崇
サービス仮説を立案するための方法論としては、一般的に「デザイン思考」や「デザインスプリント」「リーンUX」などの手法が提唱されている。 しかし、これらの方法論を活用してサービス仮説を立案しても、「経営サイドからSTOPをかけられてお蔵入りする」や「経営サイドの要望に応えているうちに、企画段階とは全く異なるサービスとしてリリースされてしまう」といった結末を辿ることが多い。 なぜ、このような現象が起きるのだろうか。本記事では「デザイン思考」を始めとする既存のサービスデザイン方法論の問題点を明らかにしたうえで、どのようにアップデートするべきかを提示することを目指す。 デザイン思考が提示する方法論・プロセス既存のサービスデザイン方法論の問題点を提示する前に、まずは「デザイン思考とはどのようなものか」について概要レベルで解説しておきたい。 まずは、デザイン思考が提示する検討プロセスを簡単に紹介しよう
「要件定義」のまえに、「要求定義」｜しょーてぃー/ Experience Designer
多くのアクセスがあったので無料化しました 要求定義テンプレも記事内でDLできます。 はじめにはじめましてUX プランナーのShoty(@shoty_k2)です。 今回は「要求定義」をつかった、UX デザインについてご紹介します。 実践用テンプレートも記事内にて配布しておりますので、参考にしてください。 「要求定義」とは要求定義とは、「事業や施策によって実現したいこと」です。ユーザーにどのような状態になって欲しいのか・何をしてほしいのか、ビジネスで何が必要なのかなどを取り決めることです。 要求定義という言葉は、もともとはシステム開発の現場では頻繁に使われている単語で、非技術者の企画者がシステムに求める仕様を定義することです。 「要件定義」と「要求定義」の違い多くの方が「要件定義」という言葉を聞いたことがあるかと思いますが、「要件定義」と「要求定義」の違いについてご存知でしょうか？ ★要件定義
サービスデザインで考慮すべき3つの「心理的ハードル」とは デザイン会社 ビートラックス: ブログ
サービスデザインを行う際にはなるべくユーザーに使いやすい体験を提供するのが一つのゴールとなる。その一方で、どうしても使いにくいと思われてしまう要素がある。 なるべくそれらの「ハードル」を取り除くことが、ユーザーに楽しい時間を提供するためには不可欠になってくる。 ユーザーに対する心理的ハードルとはサービスのUXにおけるハードルとは、ユーザーが利用する際に“摩擦”を起こす要素のこと。心理的にはネガティブな要素を与える。それにより目的を達成することを諦めてしまう = コンバージョンが下がる結果を生み出す要因となる。 この心理的なネガティブ要素が多くなってくると、コンバージョンが下がり、最終的なビジネス的ゴールの達成が困難になってくる。以前に紹介した通り、ポジティブな感情がネガティブな感情を上回るには3つのポジティブな感情が必要になる。 Googleが採用するUXデザイン手法「3対1の法則」とは
デザイナーのためのプロダクトマネジメント入門講座｜坪田 朋
最近、デザイナーキャリア相談で話した内容の言語化。UIデザイナーが将来プロダクトマネージャー(PdM)になれるかの問いに対する回答です。 デザインキャリアの先にプロダクトマネージャーはありえるUIデザイナーのキャリアをざっくり2つに分類するとサービスデザインの追求とデザインプロセスの効率化の2つに分類できて、サービスデザインを突き詰めたい人は、その先にあるプロダクトマネジメントの基礎を学ぶことで、UIデザインの精度も高まりサービス設計のキャリアを描けると思います。 UIデザイナーがプロダクトマネージャーを目指すために知っておくべきことプロダクトマネジメントの基礎を理解しておくUIデザイナーがPdM転換するためには、プロダクトマネジメントの基礎と必要なスキルセットを理解してUIデザイン業務と近い領域のオーバーラップを目指すとスムーズだと思います。 プロダクトマネージャーの基礎プロダクトマネー
企業ロゴの制作過程を1から100まで全部見せ〜実はここまでこだわっている〜｜Kabechan
私は、１個のロゴを作るのに、100個のボツ案を作ります。 そこまでして初めて、「これだ！！！」と思える デザインと巡り合うことができます。 ですので、 「ロゴってちょっといい感じの文字と、 ちょっといい感じのマークを それなりに作ればできるもんじゃないの？」 と思っている方へお伝えしたい。。。 そ ん な こ と は な い で す (泣) (悲痛な叫び) 今の時代、無料のロゴ作成ツールで簡単に作れるし クラウドソーシングサイトで非常に安価な価格で 依頼ができちゃったりもします。 別にそれが悪なわけではなく、 ロゴの種類(一時的なキャンペーンロゴ・YOUTUBE企画ロゴなど)によっては そのアプローチでもいい場合もあると思います。 ただ、企業ロゴなどでは特に、 ロゴがその会社の規模や価値観・世界観を想起させる、 最初にして最重要なコミュニケーションツールになるので、 パパッと簡単に作ってで
２週間で爆速整備したデザインシステムと運用ルールを公開｜株式会社カウシェ
こんにちは、カウシェDesignerの@Kana Kikuchiです。 サービスのデザイン運用って難しいですよね。 カウシェはリリースから約2年が経過するプロダクトですが、つい1年前まではデザインシステムやFigmaの運用ルールがおざなりの状態でした。 そこで今回は、そんな適当デザイン運用から、ある程度の運用ルールが整うまでの怒涛の2週間について記載し、整備したデザインシステムやFigma運用ルールをご紹介したいと思います！ 菊池 佳奈 / @Kana Kikuchi 2013年金沢美術工芸大学卒業後、総合広告代理店2社を経てDeNAでヘルスケア事業部に配属される。その後在職中にカウシェで複業を始め、2022年3月に正社員としてジョイン。 趣味は映画とペットと遊ぶこと。 なぜやったか1人でデザインしていたカウシェに続々と新たなデザイナーさんがジョインリリースから1年ほどの間、カウシェは当時
サービスをリニューアルする4つのタイミング｜Goodpatch Blog グッドパッチブログ
サービスをリニューアルしたい、でも本当に今やるべき？ 「自社サービスのデザインを大きくリニューアルしたいがいつがベストなのだろう…」 「なんとなく自社サービスのデザインが時代についていけていない気がする…」など、サービスのリニューアルのタイミングを迷われることがあるかもしれません。 実際、リニューアルのタイミングはいつが適切なのでしょうか？また、どのような課題感がある時にリニューアルするべきなのでしょうか？ ■そもそもリニューアルとは？ リニューアルとは、時代の流れや市場、事業の構想が変わることにあわせて、ユーザーへの「見せ方」や「伝える内容」を再構築することです。 リニューアルには決まった型があるわけではありません。自社のサービスのコアにある価値や特徴の部分を再確認し、どのようにユーザーに伝えるかを模索していくことがリニューアルの目的です。 リニューアル前によくある4つの課題 今回の記事
ソフトウェアエンジニア、家を建てる - ここぽんのーと
こんにちは、ソフトウェアエンジニアが家を建てる話が大好き人間です。 これまでは他人事として記事を楽しんできたわけですが、とうとう自分も家を建てることになりましたので、同志のために記録を残します。 ちなみに、ちょうど同じ時期に家を検討することとなったKuniwak氏と協力しながら進めています。彼の記事も併せてどうぞ。 目次とにもかくにもライフプランライフプランシミュレーターを内製する重要な指標はグラフで可視化家計簿と連携して高速にPDCAを回す住宅ローンについて学ぶ新築 /中古？マンション／戸建て？建売／注文住宅？家づくりの大まかな流れを把握する書籍で流れを掴むScrapboxで情報整理家のコンセプトを定めるハウスメーカーを選定する有名なメーカー、隠れたメーカー実体験は説得力がある土地を探す土地の災害耐性土地の将来性土地は自力で探し出すBlenderで日照シミュレーションよい土地を見つけたら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/chatgptair/status/1729621254616027562
100+ Best Midjourney Interior Design Prompts - Aituts
https://twitter.com/kataokadesign/status/1587202765301989378
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
The Ultimate Notion Resource - NotionStack