1. コーヒースタンド イーズ クライアントワーク コーディング デザイン レスポンシブ http://ease.webcrow.jp 職業訓練校の課題制作の一環として、web サイトを制作させてくれるクライアントを探し、実際に制作から 公開までの作業を行わせていただきました。現在も web 上に公開させていただいており、勉強も兼ねて更新も 無償で行わいただいています。 クライアント概要 店舗のコンセプト 誰でも安価に本格的な自家焙煎コーヒーが味わえるコーヒースタンド 立地 東京都心のオフィス街 クライアント情報 50 代女性。店の経営から調理まで一人で行う。 web リテラシーは低め。ネットや SNS への関心は高いが使いこなせていない。 クライアントの希望 一人でお店を営業しているため、web を使って休業日などの情報を発信したい。 制作概要 web サイトについて 集客率の向上はとくにもとめていない。 レスポンシブ対応（.htaccess を使用） 全 8 ページ（PC モード 2 ページ、SP モード 2 ページ） 制作期間 使用ツール およそ 60 日（実質作業時間：約 90 時間） ヒアリング ∼ カンプ制作 カンプ提出 ∼ デザイン修正 コーディング その他設定（カレンダー設定、画像サイズ変更など） DreamWeaver、Photoshop、illustrator 30 時間 20 時間 30 時間 10 時間 1. コーヒースタンド イーズ サイトデザイン デザインテイスト サイトカラー フォントイメージ かわいい、優しい、ナチュラル 茶色系、緑・赤系 ポップ系、丸ゴシック系 背景パターン ナチュラルなイメージを 表現するため、茶色ベー スのパターンを作成し背 景に設定。テクスチャを 重ねることで紙のような 質感を表現。 1. ホーム イラストの作成 有料素材 illustrator を用いてイラストを作成。 有料の素材も合わせて使用してより 可愛らしいデザインに。 2. コーヒーメニュー 3. 豆の購入 web フォントの使用 フリーの web フォント 「うずらフォント」を使用。 読み込みが重くなるがクラ イアントの希望もあって全 ての文字に適用。 4. お店について 1. コーヒースタンド イーズ サイトデザイン（SmartPhone モード） 1. ホーム 2. コーヒーメニュー PC 版 切替可能 3. 豆の購入 4. お店について 1. コーヒースタンド イーズ ワークフロー 1 ヒアリング クライアントが満足できる web サイト を作れるよう希望のサイトイメージに ついて質問を行った。ヒアリング時に は情報のすれ違いや間違いが生じぬよ う、ヒアリングシートを作成しながら 話を進めた。 2 ワイヤーフレーム作成 ホーム メニュー クライアントに完成イメージを持ってもらえる よう、ワイヤーフレームを作成。制作にはフリー サイト「Cacoo」を利用。 豆の購入 1. コーヒースタンド イーズ 3 打ち合わせ、ラフの提出 4 ワイヤーフレーム修正 ワイヤーフレームとラフ案をクライアントに提出。 クライアントのイメージと合わず、再度ワークフレームから練り直すことに決定。 クライアントの要望 要望 1：デザイン ・ホーム画面を縦長にしたい ・もっとデザインを可愛く女性っぽく nav ボタンを丸くする。 イラスト素材の使用を検討 要望 2：情報量 ・臨時休業をカレンダーで告知したい ・Twitter を埋め込みたい Google カレンダーを埋込み 編集権限はクライアントへ Twitter を埋込み Google カレンダ、twitter の操作方法をクライアントに説明し、web 上で店の情報やスケジュール を配信してもらう。 SNS に対して好意的なクライアントであったため、サイト公開後も Google、Twitter は頻繁に 更新されている。 要望 2：視認性 ・情報が整理されておらず わかりづらい 余白を広くとり 当店のこだわり 当店について 当店について 視認性を向上 アクセス 1. コーヒースタンド イーズ 5 カンプ制作 jQuery プラグイン導入 カンプ制作時は jQuery を用いて動きをつけることを想定してデザインを行った。 bxslider イメージスライダーのプラグイン「bxslider」を用いてアイキャッチ画像をスライド表示する。 モーダルウィンドウ クライアントが撮影したコーヒーメニューの画像をモーダルウィンドウで表示。画像サイズに関わらず 常に中央に配置されるように jQuery を記述。 メニュー画面 TOP へ戻るボタン TOP へ戻るボタンを全てのページの下部に設置。 クリックでトップ画面へゆっくりスライドしながら移動。 モーダルを用いたメニュー画面 メニュー画面をモーダルウィンド ウで表現。（スマートフォン閲覧時） メニューボタンを常に右上に配置 することでアクセスを容易にした。 クリック時のアクションに「fade Toggle」を用いることで、サイト イメージに合った柔らかい画面遷 v 移を表現した。 クリック時 1. コーヒースタンド イーズ 6 コーディング DreamWeaver にてコーディングを行う。スタ HTMLOUtliner イルシートはページごとに共通のものと個別の ものに分けて作成することで読み込み量を低減 する。マークアップ時は要素の定義をしっかり 捉え正確に行うよう心がける。 7 レスポンシブ化 .htaccess の使用 作成したレイアウトではスマートフォンでの 閲覧に不向きなため、レスポンシブ対応に変 更。スマートフォンモードのカンプを別個に 作成した。サーバー上には .htaccess ファイ http://ease.webcrow.jp ルを設置することで PC サイトとスマホサイ トの振り分けが自動的に行われるように設定 した。 PC モード スマホモード プロトタイプツールの使用 SP モードは PC モードとサイトのレイアウトが大きく異なるため、コーディングを行う前にプロト タイプツールの Marvel を使用し、動きや UI デザインのチェックをクライアントから受ける。 コーディングせずとも スマホ上でサイトの挙動を確認できる web サービス「Marvel」 スクロール時やボタンタッチした時の挙動を img に割り振ることで コーディングの前段階でクライアントとのすれ違いを解消できる。 8 アップロード、サイトの更新 アップロード後もクライアントと連絡を取り合い、細かい修正や変更を継続して行う。 2 -1.うちのにゃんこ Web Page コーディング コーディング デザイン レスポンシブ http://tomtomtom.tokyo/nyanko 自宅で飼っている猫についてまとめたサイト。コーディングの練習として作成。 制作概要 ・ページ数 全 3 ページ（メインページ、ギャラリーページ、フォームページ） ・制作時間 約 20 時間 ・使用ツール DreamWeaver、Photoshop、illustrator ・ポイント 1. レスポンシブ対応 2. PHP を用いたフォーム 3. オリジナルバナーの制作、設置 4, ギャラリーページの制作、設置 1. レスポンシブ対応 メイン画面を 2 カラムで制作し スマホ、タブレットで閲覧時には 1 カラムになるように設定。 header アイコンの配置や文字サ イズを調整してデザインを整えた。 2-1. うちのにゃんこ 2. PHP を用いたフォーム PHP でフォームを作成。飼い猫についての情報 を入力して送信ボタンを押すと、データベースに 情報が登録される仕組みを構築。 フォームに空欄がある場合はエラーとなり、投稿 者に再度入力を促すメッセージを表示する。 3. オリジナルバナーの作成、設置 画像加工の練習も兼ねてバナーを制作した。制作には photoshop、illustrator を使用。 ・猫写真募集バナー 猫情報の応募フォームへの リンク。自分で撮影した猫の 画像を使用。ペンツールでイ ラストを記入したり文字のジャ ンプ率を調整した。 ・LINE スタンプバナー LINE スタンプ購入ページへ のリンク。illustrator の練習も 兼ねて LINE スタンプを制作。 LINE のベースカラーとなる緑 を使用。背景にはスタンプを並 べて伝わりやすいデザインとした。 4. ギャラリーページの作成、設置 グリッドレイアウトを用いて ギャラリーページを作成。ウィ ンドウの幅に合わせて 4 カラム →3 カラム→2 カラム→1 カラム と変化。 header にはオリジナルの猫ロ ゴマークを使用。今後は応募フォ ームより猫画像を募り、ギャラリ ーに追加する計画。 2 -2.PICKUP STREAM Web Page コーディング コーディング レスポンシブ http://tomtomtom.tokyo/pickup 学校課題で制作したページ。指定された画像用いて指示通りのレイアウトをコーディングした。 制作概要 ・ページ数 ・制作時間 ・使用ツール 全 1 ページ 3 時間 DreamWeaver 制作のポイント 1. レスポンシブ対応 フルード化はせずに固定サイズで作成。 2. position 設定 アイキャッチ画像のキャプションを読みやすいように、デバイスごとに position の設定を変更して位置を 調整した。tablet では背景画像を半透明にしてアイキャッチ画像に重ねた。SP モードでは重なりを解除して 画像の真下に配置。 2 -3.楽しいおかず Web Page コーディング コーディング レスポンシブ http://tomtomtom.tokyo/okazu 学校課題で制作したページ。指定された画像用いて指示通りのレイアウトをコーディングした。 制作概要 ・ページ数 ・制作時間 ・使用ツール 全 1 ページ 5 時間 DreamWeaver 制作のポイント 1. レスポンシブ対応 グリッドレイアウト。ウィンドウの幅に応じて３カラム→2 カラム→１カラムと変化。。 ２カラム表示の時にコンテンツの数の関係からカラムのごとの高さが合わないためレイアウトが崩れてしまう。 この問題に関して、ページ下部に存在する footer を 2 カラム表示の時のみ正方形にして一つの画像のように見 せ、カラムごとの高さを調整してレイアウトの崩れを防いだ。 2 -4.Casa Blanka Web Page コーディング コーディング レスポンシブ http://tomtomtom.tokyo/casa 学校課題で制作したページ。指定された画像用いて指示通りのレイアウトをコーディングした。 制作概要 ・ページ数 ・制作時間 ・使用ツール 全 1 ページ 5 時間 DreamWeaver、Photoshop, illustrator 制作のポイント 1. レスポンシブ対応 PC→tablet では画像をフルード化して比率を保持したまま縮小。 tablet→SP ではコンテンツの float を解除し、縦長のデザインに変更。 2. バナーの制作 PC モードの右端で使用されているバナーを制作。 スマホモードではサイズを大きくしメインコンテンツの下部に表示。 2 -5.枝豆隊長 Web Page コーディング コーディング レスポンシブ http://tomtomtom.tokyo/edamame 学校課題で制作したページ。指定された画像用いて指示通りのレイアウトをコーディングした。 制作概要 ・ページ数 ・制作時間 ・使用ツール 全 1 ページ 5 時間 DreamWeaver 制作のポイント 1. レスポンシブ対応 2 カラム→１カラム。tablet と SP では文字の重なりの解除や画像の表示など細かい違いを表現。 2. svg 画像の使用 Retina ディスプレイでも画像を綺麗に表示するために使用。 3. 画像制作 各種画像、バナーの作成・トレース 宣伝用のバナー、地図の作成、画像の合成など幅広く学んだ。 illustrator を用いた地図の作成 制作時間 1 時間 使用ツール illustrator 5 COLOR S Photoshop を用いた画像加工 制作時間 1 時間 使用ツール illustrator カフェメニューのトレース 制作時間 1 時間 使用ツール illustrator 気分に合わせたカラーと F ORMAL S HOES 豊富なサイズを サイズ：２１． ５ｃｍ∼２６ｃｍ カラー：フォーマルブラック シャイニーレッド プレシャスパープル ディープグリーン クーリッシュブルー えました 素 材 ：合成皮革 19,800 価格： 円 詳細を見る 既存バナーのトレース 制作時間 1 時間 既存バナーのトレース 使用ツール illustrator エアコンクリーニング 制作時間 1 時間 既存バナーのトレース 使用ツール illustrator 年末年始大掃除 キャンペーン 実施中 12 月は大変込み合いますのでお早め目にお申込み下さい ! 詳細を見る 梅雨にむかう今この時期がエアコンの クリーニングにぴったりです。 是非この機会をお見逃しなく！ キッチン パック 水まわり パック まるごと大掃除 パック 11 月お申込み（12 月作業分）の方へ粗品進呈！！ 1 月作業分はお年玉特典として 5%off＋粗品進呈！！ 既存バナーのトレース 制作時間 1 時間 既存バナーのトレース 使用ツール illustrator 制作時間 1 時間 アラフォー 中心 まで 新しいこと始めようキャンペーン ０ 入会金 誰でもできるやさしいヨガ 円 月会費 10,000 円 呼吸 瞑想 制作時間 1 時間 使用ツール illustrator ＊ 10/7(月) 働くママ 中心 福利厚生 yogayogayoga 関東発！！ 出張ヨガ専門店が登場！ あなたもティンクルラボ の 楽しいコニュニ ティに 参 加して みませ ん か？ 自分磨き お申込期間 4/30( 水 ) 2013年 女性が自分らしく輝くために 仲間づくり 使用ツール illustrator 既存バナーのトレース 使用ツール illustrator 輝く女 性 研 究 所 ２７歳以上 限定 制作時間 1 時間 OPEN!! リーズナブルな価格で 出張いたします。 独立・起業支援 集客ビジネスツール ＊ www.yoga.yogayoga たくさんの 方 にご 活 用 いただいています！ 既存バナーのトレース 制作時間 1 時間 使用ツール illustrator 既存バナーのトレース 制作時間 1 時間 使用ツール illustrator オリジナル画像の作成 制作時間 1 時間 使用ツール illustrator 4 -1.Travel Sketch WorkPress サイト レスポンシブ benibana.wp.xdomain.jp PHP を使用して、一から WordPress のテーマを作成。コンテンツは授業で与えられたものを使用。 制作概要 ・ページ数 ・制作時間 ・使用ツール 7 ページ 40 時間 DreamWeaver、MAMP 制作のポイント 1. PHP によるテーマ作成 PHP を用いてテーマを作成。PHP の初歩を学ぶために既存のコンテンツを用いてテーマ作りを行う。 2. jQuery スライダーを導入。 スライダーを導入。スライダー画像は WordPress のダッシュボードから変更可能。 4 -2. WorkPress サイト ギャラリー レスポンシブ http://tomtomtom.tokyo/gallery 自分の撮影した写真や趣味の制作物を紹介するサイト。既存の WordPress テーマを使用して作成。 制作概要 ・ページ数 ・制作時間 ・使用ツール 随時更新中 5 時間 DreamWeaver、Photoshop 制作のポイント 1. WordPress テーマの選択 画像を横スライドで見せられるフリーのテーマ「Portra」を使用。ギャラリーやポートフォリオ向けに特化し た WordPress テーマの中から選択した。 2. 画像の編集 撮影した画像の質やサイズを適宜編集。
© Copyright 2024 ExpyDoc
