マガジンのカバー画像

web-design

9
運営しているクリエイター

記事一覧

広告バナーをデザイン論で語らずに「ビジネス思考」を学んでみよう!

広告バナーをデザイン論で語らずに「ビジネス思考」を学んでみよう!

以前Twitterで投稿した内容を少し深掘りし、バナーがどれほどの経済効果を生んでいるのかを解説したいと思う。

ご注意 : 登場する数値は「実数値ではなく編集した目安」の数値です。弊社顧客の数値とは関係ありません。

はじめにTwitterではクリック率とCV数(購入数)を書きましたが、そこから掘り下げて広告に対しての費用対効果まで考えてみます。
・数は獲れるが赤字になる
・効率は良いが数が足り

もっとみる
📝ちゃんと使い分けてる?CSSのpx, em, rem, %, vw単位の違い

📝ちゃんと使い分けてる?CSSのpx, em, rem, %, vw単位の違い

HTMLやCSSを学びたての頃はとりあえずpx単位で指定することが多いと思います。その後、emやremなどいろんな単位が出てきて混乱することもあるかもしれません。

それぞれの単位にはメリットとデメリットがあり、なぜその単位を使うのかをしっかりと理解して使い分ける必要があります。

単位の定義CSSには多くの単位が存在します。ここでは、実際に使うことの多い単位について詳しくみていきます。

px単

もっとみる
個人的に実践しているWebデザインガイドライン⑦ その他重要事項編

個人的に実践しているWebデザインガイドライン⑦ その他重要事項編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# モバイル対応
モバイルフレンドリー対応を考慮する。

高画素密度ディスプレイ(Retina)対応を考慮する。

回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。

Android 4系は対応していないCSSやCSS関連のバグが多い。

もっとみる
個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

あくまで個人的に実践しているデザインガイドラインです。

記事一覧はこちら↓

# 基本事項必ずWeb用設定で作成する。

カラーモード → RGB
単位 → 定規・文字ともピクセル(px)
基本解像度 → 72dpi

解像度については以下の記事が分かりやすいと思った。

僕は現在はXDでデザインカンプを作ってますが最近までPhotoshopでした。そのため、Photoshopでの作業環境を

もっとみる
個人的に実践しているWebデザインガイドライン⑤ テキスト編

個人的に実践しているWebデザインガイドライン⑤ テキスト編

あくまで個人的に実践しているデザインガイドラインです。

記事一覧はこちら↓

# 基本事項
使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。

文章の頭位置を揃え、他の要素とのベースラインも揃える。

文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。

日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基

もっとみる
個人的に実践しているWebデザインガイドライン④ 画像編

個人的に実践しているWebデザインガイドライン④ 画像編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。

画質は統一する。画像によって解像度が違いすぎるようなことは避ける。

ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。

写真のトーンは適切に補正する。撮影した

もっとみる
個人的に実践しているWebデザインガイドライン③ レイアウト編

個人的に実践しているWebデザインガイドライン③ レイアウト編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。

コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。

重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離

もっとみる
個人的に実践しているWebデザインガイドライン② 配色編

個人的に実践しているWebデザインガイドライン② 配色編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。

基本配色とはベースカラー・メインカラー・アクセントカラーの3種。

<ベースカラー>
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるため

もっとみる
個人的に実践しているWebデザインガイドライン① デザイン基本事項編

個人的に実践しているWebデザインガイドライン① デザイン基本事項編

こんにちは!

Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。

せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。

基本的には以下のツイートに注釈をつけて説明したものとなります

もっとみる