UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
【新人向け】Webデザイン制作の流れの紹介。 | ネクストページブログ
Web制作は、複数の人の仕事の積み重ねでできているので、一つ一つの情報の受渡しをしっかり共有することが大切です。案件の内容の受渡しがうまくいかない場合、ミスや修正作業が多く発生してしまうので、「誰か一人だけが知っていること」はできる限りなくしましょう。 （2）情報整理 ディレクターから受け取った情報（WF・資料）を整理します。 デザインは、「誰が」「誰に」「何を」「なぜ」「どこで」伝えたいかでどのようなデザインにするかが変わります。 デザインの方向性を決めるため、最初に情報を整理していきます。受け取った情報を下記のように整理していきます。 エンドクライアントの情報 事業内容／年齢層／案件依頼の背景・課題／強み・オシ エンドユーザー（ターゲット）の情報 BtoBか、BtoCか／年齢層／性別／職業など（具体的であればあるほど良い） 閲覧環境 デバイス／ブラウザ環境／スマホ対応／どういった時に閲
お問い合わせフォームを即改善する10の施策とポイントを解説
「お問い合わせフォームへのアクセスはあるのに、問い合わせには結びついていない」とお悩みの人も多いのではないでしょうか。 問い合わせフォームへのアクセスを基準にフォームの回答率を出したときに、30％以下の場合は、フォームの改善を検討することがおすすめです。 今回は、お問い合わせフォームを改善するときの10のポイントを紹介します。 お問い合わせフォームの改善は費用対効果が高く即効性がある 本記事にたどり着いたあなたは、お問い合わせフォームの改善を検討していることでしょう。 冒頭でもお話したように、フォームの回答率が30％が基準となります。回答率が30％以上の場合は、フォームへの流入数を増やす施策を行いますが、30%以下の場合はまずCVRの改善から行うことがコスパがよいでしょう。 お問い合わせフォームは少しの改善でも、CVRが大きく改善します。施策の実行は短時間でできるものが多いですが、即効性も
【総数378件】文字組み・文字だけのバナーデザインまとめ！ | BANNER LIBRARY
全国のBEAMS各店舗と「ビームス公式オンラインショップ」にて、季節を彩るアイテムを豊富に取り揃えた『Begin,the New You』がスタートいたしました。 ファッション・アパレル商業施設・店舗かわいい文字組み・文字だけシンプル
Photoshopで淡い光が差し込んだ「ライトリーク（光漏れ・感光）」の作り方
こちらの記事はアプリ「Adobe Photoshop」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 淡い光刺差し込む「ライトリーク（光漏れ）」の加工方法 このような感じに、オレンジ色の淡い光が差し込んだような加工していきます！素材をオーバーレイするだけなので、とっても簡単に作り出すことができます！ ライトリーク用素材を準備する ライトリーク素材をダウンロードする方法を３つご紹介します。 【１】ストックフォトサイトからダウンロード 普段使っているストック素材サイトなどで【 Light Leak 】や【ライトリーク】と検索すると黒地に光が差し込んだような素材がでてくるので、お好きな画像をダウンロードしましょう。 上記サイトは『Adobe Stock』です。有料・無料どちらもあり、AdobeCCユーザーなら無料素材
CV率UP！実践から導きだすコンバージョン率の高いボタンの作り方
CV率を上げるボタンとは？コンバージョン率を上げるボタンの作り方の前に、まずはCTAについておさらいしましょう。 CTAというのは「Call-To-Action」の略で、ユーザーへの行動喚起を促す箇所のことを言います。以下のような部分ですね。 フォームへ遷移するボタンや電話番号、電話をするボタンなどを配置しているパートです。 CVボタンというのは、このCTA内にあるようなボタンのことを言います。 なぜ、CTAの話から始めたのかというと、コンバージョン率を上げるボタンを作るという話は、ボタン単体では語ることができない場合が多いからです。 このページでは、ボタン単体ではなく、ボタン周りのCTA全体について解説しています。 ボタンの基本的な構成ボタンについては主に以下のよう構成になっています。 マイクロコピーというのはボタン周りテキストで、ラベリングはボタン内のテキストになります。 コンバージョ
横長バナーレイアウト｜デザインパターンのアイディア案10！
こんにちは！広告会社でデザイナーをしている『かじゅう』です！ みなさんは横長バナーデザインをどのくらい作成できますか？ 横長バナーは狭く限られたスペースにレイアウトするのがとても難しいですよね。 私が勤務している広告代理店では横長バナーの依頼がよくありますが、大量の依頼の際は大体レイアウトのパターンに苦しみます。 そこでこの記事では、横長バナーデザインのレイアウトパターンをまとめたいと思います。 この記事のレイアウトはGDNバナーサイズ：「930px×180px」です。 GDNは「Googleディスプレイ広告」のことで、「930px×180px」はディスプレイ広告のフォーマットの一つです。
【全15種類】その仕掛け、ユーザーの信頼を失ってない？ 僕らが知っておくべきダークパターン | キャリアハック（CAREER HACK）
退会方法がわからない…勝手にメルマガ登録させられていた…ダークパターンとは、そんな“邪悪”とも受け取られるサービスの仕掛け。そもそもダークパターンとは何か。どんな種類があり、どう改善するか。書籍『ザ・ダークパターン』著者の仲野佑希さんに、プロダクトやサービスの提供者として知っておきたいことを伺った。 そもそもダークパターンとは何か？ 2022年8月に出版された書籍『ザ・ダークパターン』著者の仲野佑希さん。UXライターとして働く傍ら同著を執筆した。はじめに、そもそもダークパターンとは何か、その概要から伺った。 みなさん、ネットショッピングやフードデリバリー、旅行予約、動画のサブスクサービスなどを日常的に使っていると思いますが、おそらく一度は「退会・解約方法がわかりにくい」「勝手にメルマガ登録させられた」「手数料込みの価格が後から表示された」など、ネガティブな体験をしたことがあるのではないでし
ゴールを見失わないために！デザインをする前にチームで「ムードボード」を作ろう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのもーりーです。 皆さんはデザインを決めるときに、なにを頼りにしていますでしょうか。 僕のデザイナーとしてキャリアの始まりは、チラシや冊子などの紙媒体のDTPオペレーター兼デザイナーからでした。 DTPオペレーターやデザイナー時代からひとりで黙々とデザインを作ってクライアントに提案するという、言い方は悪いかもしれませんが孤立無縁のスタイルでずっとやってきたので、いまだにそのやり方が染み付いています。ですので、ワークショップなどで関係者の合意を集めながらデザインしていく最近のスタイルも勉強しないとなぁと焦っています。 そこで、今回はデザイン作業に入るためのチームでのムードボードの作り方について、勉強ついでにご紹介したいと思います。 「ムードボード」とは ムードボードとはチームでさまざまな視覚表現やトーンアンドマナーを探るためのツールです。流行の調査やアイデア収集に使うこ
フリーランスに依頼しても大丈夫？LPデザインのみ費用・クオリティ【事例まで全部おみせします】
LPを外注しようと思っています。高額になるのでデザインとコーディングを分ける予定です。デザイン単体で依頼した場合、どのくらいの金額になりますか。 LPデザインをフリーランスにお願いするとなると、３万〜５万が相場です。 とはいえ、ジャンルに金額は変動します。 例えば、美容室。このジャンルはクラウドソーシングでもよくみかけます。こういうケースは、３万、あれば大丈夫です。 一方、作り込みが必要な「縦長のデザイン」だったりは、費用がグンと上がります。 この記事を書いているのは、WEBディレクターをしているフリーランスです。制作はすべて外注しています。 フリーランスを探すときは、クラウドソーシングが便利なので、実際のクオリティや費用感を一緒に見ていこうと思います。
歴史から学ぶデザイン！今も愛され続けてるデザインスタイル
現在のWebデザインの主流スタイルの１つに「フラットデザイン」というスタイルがありますが、源流を辿ると19世紀に発祥した『スイス・スタイル』や『バウハウス』がルーツとされています。 このようにデザインスタイルは０から生まれるだけではなく、過去に流行したスタイルが現代風にアレンジされ、リバイバルされ、取り入れられることも多いのです。 『故きを温ね新しきを知る』 デザインの表現力を広げるなら、自分の知識だけではなく、過去の事跡や先人の知恵に学ぶことで、現在を考えるということです。 ということで、今回はデザイン史をすべて取り上げることが難しいので、近年によく見かけるデザインスタイルをピックアップしてご紹介します！ アール・ヌーヴォー 出典元：アルフォンス・ミュシャ代表作のひとつ『夢想』(1898)（wikipedia） アール・ヌーヴォーとは、「新しい芸術（Art Nouveau）」を意味するフ
ワイヤーフレームとは？作り方やテンプレートが使えるおすすめツールもご紹介｜セブンデックス
WEBサイトやアプリを開発する上で必要なワイヤーフレーム。開発途中で必要なものなので、普段目にすることはあまりなく、その役割をしっかりと理解している人は少ないのではないでしょうか？今回は、ワイヤーフレームとは何か、作成手順から気をつけるポイントまでを解説していきます。 ワイヤーフレームとは？ ワイヤーフレームとは、Webサイトやサービスなどを制作する上で、ページの構成を示す基本的なレイアウト図のことです。基本はグレースケールで作られ、細かなデザイン作業に入る前の設計図としての役割を持ちます。 例えば、このSEVENDEX POSTのワイヤーフレームを作ると、上記の画像のようになります。実際にデザインを進める前に、完成イメージを「見える化」することで、情報の抜け漏れがないか、機能の整合性がとれているかを確認します。 混同しやすいキーワードの違いを知ろう ワイヤーフレーム 何に似てる？：建築で
ワイヤーフレームにはどこまでの内容が必要か？より良いデザイン行程のために知っておくべきことを解説
UX Planet UX Planet is a one-stop resource for everything related to user experience. ワイヤーフレームは、サイト作成時の課題を取り返しがつかなくなる前に見つけられる最適な方法ですよね。でも正しい作り方って何でしょう？この完全版ガイドを読めばすべてがわかります。ぜひチェックしてみてください。 ワイヤーフレームとは？ Webサイトのワイヤーフレームは、あらゆるプロジェクトにおいて古くから言われるような青写真と比較されることがよくあります。つまり、今後の制作工程でどんな風にできあがっていくのかをはっきり見せられるような画像のことです。実用的な地図のようなものなので、全員がそのプロジェクトのどこで何が行われるのかを正確に把握することができます。比較的安く作成できることはさておき、Webサイト作りにおいてもコミュニ
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
TCDテーマのトップページのバランスを崩す例 6選 – ワードプレステーマTCD
美しいWebサイトには、決まって整合性があります。 整合性とは、つじつまが合っていること、矛盾なく整っていることです。つまり、バランスがいいということです。Webサイト内のそれぞれのパーツの場所、並び、大きさなど、あらゆるものに整合性があるため、人々は美しいと感じます。 本記事では、どうすれば整合性のとれたトップページを作れるのか、バランスを崩しやすい要因を6つ事例として紹介します。より美しいWebサイトに近づけるため、ぜひご一読いただけますと幸いです。 美しいWebサイトにおける整合性とは Webサイトにおける整合性とは、全コンテンツが一貫したルールに基づいて構成されているかの基準です。 そのルールをつくるのは設計者。つまりウェブデザイナーです。ウェブデザイナーの脳内にある構想や思想、感性に基づいて、ルールは自ずと生まれていくもの。言い換えれば、思想のないデザイナーが作ったウェブデザイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WEBデザインの流れ】WEBサイト制作工程とデザイナーの役割とは？ | 生き方・働き方・日本デザイン
WEBデザイン制作工程をご紹介！どうやってつくるんだろう？ - no1webservice
【反復】プロがやっている要素の繰り返しでデザインにリズムを作ろう！ | デザイン研究所
tsumujilog.com - tsumujilog リソースおよび情報
“思わずクリックしたくなる”バナーデザイン発注のコツ！ 「イメージと違う」を解消する6項目 | 【レポート】デジタルマーケターズサミット2022 Summer
