Webデザイン

マウスオーバー時にナビに三角マークを表示させる

ナビゲーションボタンのマウスオーバーの状態として、ボタンの下に三角マークが表示されるものがあります。 CSSを使った方法を記述しておきます。 マウスオーバーしていない時のナビボタンの表示 マウスオーバーしている時のナビボタンの表示(三角マークが…

Webサイトの表示速度もユーザビリティ

amazonでは、Webページの反応が0.1秒遅くなると売り上げが1%低下 Googleでは、Webページの反応が0.5秒遅くなるとアクセス数が20%低下 一般的に、Webページの表示スピードが1秒遅くなると、PVが11%、コンバージョンが7%、顧客満足度が16%低下 表示速度を…

アクセシビリティ

アクセシビリティ(Accessibility)とは、高齢者や障害者を含む誰もが支障なく利用できる度合いのことです。 回線品質、端末の性能、ブラウザの設定など、さまざまに異なる利用環境においても情報取得に重大な問題が起こらないようにすることが大切です。 W3…

Webサイトのユーザビリティ

ユーザビリティ(Usability) サイトを訪れたユーザーが、目的の情報にいかに正確に、すばやく、途中で不快感を覚えずにたどり着くことができるかについて、その達成度を示します。 本質的なユーザビリティ ユーザーの不満を限りなくゼロに近づけます。 付加…

タッチアイコンの設定方法

スマートフォンでは、画面上の各サイトのアイコンをクリックしてサイトのページを表示させることが一般的です。よってスマートフォンでサイトアクセスに使う”タッチアイコン”を作成しておく必要があります。 準備するアイコンについて 各デバイスに完全準拠…

レスポンシブデザイン

2カラムでレスポンシブなページを作成 ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>RWD枝豆</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head> <body><div id="container"><header><h1><img src="img/logo.png" alt="枝豆隊ロゴ"></h1><h2>豆はカ…</h2></header></div></body></html>

Illustratorでロゴ作成

アピアランス機能とブラシを使ってロゴを作る 新規ドキュメントの準備 カラーモードをCMYKにする 環境設定ー>単位ー>線をポイントにする ロゴにする文字を入力 文字の入力 アウトラインを作成 グループ解除 文字の変形 説明 メニュー「書式」ー>「アウトラ…