96's blog

WEBサイト制作科 6ヶ月コース

サイト制作

サイト制作

これから作成するサイトに縦スクロールのjQueryを必ず使おう。 いろいろあるけどto-Rで紹介しているsmooth scrollが動きがいい。 http://blog.webcreativepark.net/2012/09/06-152317.html

ポートフォリオ

数字を使うと伝わりやすい。 制作時間も書く。 紙バージョンも必要。

レンタルサーバーへのアップデートでの注意点など

業者が指定するアップデート先フォルダ(web、www、public_htmlなど)がある場合はそこに保存する。サーバー直下に保存すると、公開するつもりのない保存データが見えてしまう。 サイトが完成したあとは、クライアントにID・パスワードを変更してもらい管理権…

サイト制作(小川富二個人HP)

サイト制作(完成発表プレゼン3日目)

meta descriptionをしっかり書くように。体言止めではなくですますで止めたほうがベター。 仮アップしたときに検索エンジンに拾われたキーワードが強く、本アップのときに抜けない場合がある。 bodyのすぐあとのpにはキーワードを含んだ文章が望ましい。

サイト制作(完成発表プレゼン2日目)

サイト制作(完成発表プレゼン1日目)

meta descriptionを三文節で書くこと。 nav画像の文字は大きくしない。 スクロールバー常時表示 html{overflow:scroll;}

サイト制作(構築手順)

文章構造 文法チェック グループ化 CSSを適用 CSSのチェック ブラウザのチェック(IE)

サイト制作(検索対策)

トップページのURL 「○○○/」と「○○○/index.html」は検索エンジンが別物とみなすため、「○○○/」に統一する。htmlの記述はa href="./"。 検索エンジンの持って帰り方の確認 「site:(自分のURL)」で検索。 検索エンジンを鍛える 自分で自サイトにアクセスする…

サイト制作(注意事項)

アップしないデータを誤ってアップしない方法 アップしないファイルは名前を日本語で設定すると区別しやすい。 DreamWeaverの[サイトの管理]の[詳細設定]→[クローク]でアップしないファイルを指定する。 写真管理 googleのPICASA PC内の画像を洗い出す。 Pho…

サイト制作

googlemapの埋め込みについて 緯度経度を取得して表示する方法だと、ピンが必ず真ん中にきて、そこからの吹き出しが地図の表示範囲からはみ出てしまう。 吹き出しも含めて表示範囲を設定するには、 1)任意の地点を表示 2)[リンク]→[埋め込み地図のカスタ…

サイト制作(注意)

文字の可読性 黒字に濃い字を置くと読めない。 境界と文字の隣接 文字が端に密着していると読みづらい。

プレゼンテーション3日目(サイト設計)

サイト制作

プレゼンテーション2日目(サイト設計)

価格を提示しないと集客できない。

プレゼンテーション1日目(サイト設計)

地図 拡大・縮小させずにひと目で位置がわかるようにする。 2週間後あたりに途中経過プレゼンを行う。 第3回月例習熟度テスト実施。

サイト制作(『設計フェーズ』)

WebDesignWorks「キックオフ」「プランニング」 サービス内容がメイン。サービスをキーワードで表せないとサイトにならない。 色は好みで選ばない。 競合が多いキーワードは選ばない。ニッチで。 読み上げブラウザへの対応はまだ進んでいない。 ペルソナ こ…

サイト制作(色彩計画、デザインなど)

先生がサイト制作関係のwebサイトを使って講義をしているのを聞きながら、各自制作を進める。 マンセルのカラーチャートのサイト:HUE/360 色ツールまとめサイト:creive スマートフォンサイト制作では、色を16進数ではなくCSS3から採用されたRGBAで記述する…

サイト制作(設計フェーズ)

要件定義書の作成 cacoo登録。作成はcacooで行う。 作成例として過去の受講生の要件定義書を紹介。 内容は、 サイトの目的 ターゲット(ペルソナ) キーワード(検索用) 使用する色(3・4色。カラーチャートで) あれば参考サイト サイト構造設計(サイト…

IE6への対応

IE6は、インターネットを日常的には使ってないPCに入っているときがある。 IE6でよくあるのがカラム落ちと透過PNGの不適応。 IEtesterで検証。xamppでテストサーバーを使って表示する。 DreamWeaverのブラウザーリストに追加できる。 カラム落ちを防ぐ float…

検索エンジン

全角スペースや→もキーワード扱いになる。 HTMLのエラーも評価対象。 ハブになっていると評価が高い。

ケーキショップサイト06(Favicon作成、GoogleMap設置)

Favicon作成 先生が配布したケーキのイラストをPhotoShopでFavicon生成用に加工する。 多角形選択ツールでケーキ以外の部分を選択してdelete。 イメージ→モード→RGBにしてpsd形式で保存しておく。 Faviconのサイズにしても何の絵かわかるように色を調整する…

サイト制作実務手順のおおまかな解説

サイト制作の実務手順書をスキャンしたものを先生から配布してもらう。 ペーパーテストの問題は、この中から出題するとのこと。 実際にサイト制作していくにあたって、要件定義書、ヒアリングシート、ワイアーフレーム、制作仕様書、ガントチャートをつくる…

サイト制作補足

業種とサイト構築の関係性 業種によっては文章構造よりデザイン性を重視しても上位表示される。 ケーキショップのサイトはアウトラインを構築しなかったりtableレイアウトを採用しているものが多い。 情報系サイトではない場合は、見栄え重視で構わない。 た…

ケーキショップサイト05(改修作業)

クライアントからの改修依頼があったという設定。 ビルボード画像 先生が配布したPSD形式の背景画像で作業。 長方形を描くときはアンチエイリアスのチェックを外す。 画像に不透明度60の帯を重ね、キャッチコピーを乗せる。 文字ごとのカーニングはalt←・→で…

ケーキショップサイト04(ユミの部屋)

ビルボード画像の任意の範囲にリンク領域を設定する DreamWeaverのデザインビューを開き、プロパティのマップ項目にあるホットスポットツールを使う。プロパティの下半分が表示されない場合は、プロパティ内のスペースでダブルクリックすると表示される。 任…

サイト制作の補足事項

売るためのトップページ 消費者はすべてのページを見てくれるわけではないので、必要な情報をトップページに必ずのせる。 必要な情報とは、消費者が持っているサイトに対する不安を解消する情報と、買うために必要な情報。 制作者の情報(会社概要や個人のプ…

サイト制作の補足事項

h1内に画像だけでは検索されない。altはアウトラインに反映されない。 トップ画像はサイトを印象づけるものであり、買う動機になるものではない。また、画像をいろいろ変えると印象に残らなくなる。 新着情報は必ずdl。 商品情報では画像が重要な情報になる…

ケーキショップサイト03

店舗紹介ページ (前回のつづき)CSSでtable部分を指示通り入力。 商品購入ページ template.htmlを別名保存。 HTMLでform部分を指示通り入力。 トップページ template.htmlを別名保存。 FireWorksでカンプから画像切り出し。 新着情報はdlではなくpで記述。 …

授業課題管理ページ制作

お手本:忘筌 ナビゲーション部分にはアコーディオンパネルを使う。 制作したもののサムネールを表示する。 サムネール画像にはbox-shadowでドロップシャドウをつける。 metaにkeywordとdescriptionを設定する。 keywordは3つ。descriptionにはkeywordを使…

無料サーバー・忍者ホームページの利用

忍者ツールズに登録。 忍者ホームページでFTPの設定(サーバアドレス、ユーザ名、パスワード)。 DreamWeaverでリモートサーバー設定。サイト管理のサーバーで忍者ホームページで設定した項目を入力。テストでつないでみる。 ↑(PUT)でアップロード。 授業…

サイト制作についていろいろTips

GoogleドライブのプレゼンテーションはPowerPoint形式で書き出し可能。 飲食店のサイトは商品写真を揃えるのが大変。 知り合い関係のサイト制作は、人間関係に注意。 とことん追求して価値あるものなら趣味サイトを作ってもOK。 レンタルサーバーはLolipop26…

ケーキショップサイト02

htmlデータは先生から配布。 商品紹介ページ(チーズスフレ、苺のバースデーケーキ、焼菓子詰め合わせ) FireWorksでカンプから画像の切り出し。 各ページの内容(div id="main")の画像(タイトル、商品画像、購入リンクボタン)を切り出し。 DreamWeaverで…

ケーキショップサイト01

facebookのグループからデータをダウンロード。 中身は全ページのカンプ、baseのCSS、ナビゲーションのIMG。 カンプから画像切り出し FireWorks 各カンプをページごとに読込み プロパティで座標指定X:0 Y:0 webレイヤーに切り出す素材 ガイドを引く→スライス…