WEB＆グラフィックデザインのネタ帳
| Chapter 01 さまざまなWebパーツのネタ | |
|---|---|
| すぐにつくれる「留め具」アクセント パラパラアニメで現れる花のボタン パキッとくっきりアメコミ調イラスト ドット絵風のボタンやアイコン 「スタイル」でスクリーントーン ポップでかわいいミニアイコン ミニアイコンでシンプルなページ 鉛筆ライン風のWebページ スピードが変わる飛行機アニメ 写真と文字でトップページを演出 フィルタでつくる古着風パターン アナログ感を醸すダンボール素材 古びた風合いの陶器のパターン マス目を利用したドットペイント |
|
|
|
|
| Chapter 02 画面に映えるタイポグラフィ＆ロゴのネタ | |
| アナログ的な古紙風タイトル 千代紙模様の和風文字 画像を利用した雰囲気あるロゴ 木彫り風のタイトルロゴ 簡単にできる万線風ロゴ 変色した古紙に焼きつけた文字 フォントの利用でポップなロゴに 文字のバランスでつくるロゴ 文字の形から連想して一工夫 フィルタでつくるプールの水面 スパンコールのようなウロコ文字 ドット拡大フォントでロゴをつくる パスを利用した曲線フォント フェルトペンで書いた文字 |
|
|
|
|
| Chapter 03 画像にひと味加えるためのネタ | |
| 注目度を高めるモザイク処理 パターンで印象的な写真に 低コントラストでクールなイメージ スキャンラインでビデオ画像に 露光を落として雰囲気のある写真 手軽に加工 色鉛筆風のタッチ 鉛筆風のタッチでシックな雰囲気に フィルタでつくる油絵風イメージ アミ点加工で新聞風の画像に 風景写真に雨を降らせる PNGを使った高画質な透過 エンボス効果で化石風に ぼやけた写真の色見や輪郭を加工 こんぺいとうのガリガリ感を強調 描画モード変更でメリハリある画像 ねむい画像の修正とソフトフォーカス |
|
|
|
|
| Chapter 04 アイキャッチになるGIFアニメーションのネタ | |
| 基本サイズのキャラクタバナー フレームでつくる点滅するネオン管 ループする「電車」GIFアニメ タイピングされるテキストボックス リズミカルな卓球バナー 色数を抑えた多フレームアニメ 広告バナーサイズのGIFアニメ トゥイーン機能で色の変化をつくる 燃え上がるファイヤーパターン 昼から夜へと変化する街の風景 流れるように点灯するバー スポットライトに浮かび上がる文字 電波障害が起きたテレビ 携帯電話の液晶パネル 小刻みに点滅するライト TV走査線のようなGIFアニメ スピード感のある飛行機GIFアニメ |
|
|
|
|
| Chapter 05 Webに楽しさを加える動きのネタ | |
| マウス操作に反応するキャラクタ ポインタから飛び出る文字 マウスに追随する波紋アニメ 固定ウインドウにスタッフロールを フルカラーのロールオーバーアニメ マウスに追随するクロスライン 電車が横切るスプラッシュページ 背景色を制御したフェイドイン 円を描くプログレスバー フォームでつくるサインボード ふたつの動きで追随するポインタ 描画ツールライクなラインアニメ マウスをたどる軌跡アニメーション JPEGでフルカラーアニメ |
|
|
|
|
| Chapter 06 インタラクティブな仕掛けのネタ | |
| クリックに反応するアクションナビ リモコンを模したロールオーバー ドラッグ＆ドロップを利用したリンク ムービークリップで切り替えFlash スイッチを押して照明をつける演出 ナビゲーションからムービーを制御 パスワードが設定可能なボタン マウスオーバーで表示する新着情報 立体的な動きの3Dナビゲーション 拡大表示するスクロールバー フロートヘルプを表示するボタン マウスオーバーで変色するキューブ 活用法はいろいろ ミニメニュー! |
|
|
|
|
| Chapter 07 インターフェイスデザイン＆レイアウトのネタ | |
| 疑似エレベーターで直感ナビゲーション ポストイット風掲示板 OSライクな操作ウインドウ マウスに反応する疑似3D空間の表現 半透明に見えるテーブル 操作感が楽しい隠しフレーム Macintosh風コントロールバー 表示時間を変更できる広告 修正作業がラクなナビゲーションボタン ページを縦に自動スクロール 横スクロールするリンク画像 ピクセル単位でオブジェクトを配置 |
|
|
|
|
| Chapter 08 使い勝手をよくするちょっとしたネタ | |
| 固定もできる背景画像の指定 分岐処理でOSやブラウザのチェック いつでも同じフォントを表示 ダウンロードの時間を楽しく演出 CSSでテキストをインデント DHTMLによる表示・非表示 モニタ中央に開くサブウインドウ 大きくなりながら開くウインドウ モニタの色数を自動チェックする ユーザー環境別にCSSを設定する Webの更新日を自動で更新 |
|
|
|
|
| Appendix | |
|
|
|
