Shoji Yarita Design Archives

Design Archives "Top"

このDesign Archivesのページでは私のWEB作品を紹介しています。各コンテンツ部分はj Queryのアコーディオンパネルで作成しました。クリックするとアクティブになり各ページがご覧になれます。
このトップページでは、ヘッダーにFlashを使用しています。宇宙風?の背景を作り、そこに惑星を中心に回転するオブジェクトを作りました。メッセージ文字が裏側に回るとFlashの2フレーム目が表示され別の文字になります。右上の2つのパターンをご覧ください。注意点は2フレーム目の文字は左右逆にすることです。別の例としてハロウィン風の髑髏の回転イメージも作ってみました。

Web Site Sample 「WAVE立川ホーム」
ハウスメーカーTop Page

架空の住宅メーカー「WAVE立川ホーム」です。多摩地域に施工実績のある企業と想定しています。企業イメージカラーはダークブルーで、堅実さ誠実さをアピールしています。トップページのメインはjQueryで作成し、画像の入れ替わるムービーで施工住宅の外観、内装のきれいな写真がメインの構成です。ベースはDreamweaver、CSSでデザインしています。2ページめは施工事例の紹介です。3ページ目はお問い合わせのページです。
お問い合わせのページに誘導するようにデザインの工夫をしています。

Web Site Sample 温泉旅館「松雲閣」

架空の温泉旅館「松雲閣」です。和のデザインにチャレンジしてみました。しっとりとした落ち着いたデザインです。トップページは、夜景の庭の写真をトリミングしたものに、旅館ロゴをべベルとエンボスで浮き彫りのような感じにして、写真のワイド感を生かすように配置しました。中央にスライドビューワーを設置し、部屋や料理等を印象づけるミニギャラリーになっていて、早送り・巻き戻しができます。ナビゲーションは縦書きで、そこにホットスポットでリンクを設定しています。2ページ目は部屋や料理の写真をすっきりと表示しています。3ページ目はアクセスのページです。Googleマップに少しデザインを加えています。

Web Site Sample 「立川学園大学」

架空の大学「立川学園大学」です。2011年で創立60周年を迎える大学です。スクールカラーはエンジとピンクです。大学ロゴと60周年記念ロゴを大学名の両脇に配置し、ブランドイメージを補強しています。ヘッダー右に使用頻度の低いサブナビを配置し、検索機能も付けました。メインナビゲーション、フッターはスクールカラーを使用しています。トップページはjQueryのスライダーでワイドな画像がタイマーで切り替わります。左右のボタンで任意に動かすこともできます。2ページ目は大学の沿革です。3ページ目はお問い合わせのページです。
お問い合わせのページに誘導するようにデザインの工夫をしています。

Web Site Sample 陶器の人形ギャラリー「Born&Bred」

架空の陶器の人形ギャラリー「Born&Bred」のサイトです。メインデザインは1ページで上下にスクロールして見るようにしています。トップにはjQueryでスライダーを作成し、任意に早送り・巻き戻しもできます。右のナビゲーションはフローティングし、クリックすると、指定のページにアニメーションの動きで移動します。人形紹介の部分はPhotoshopでデザインし、jQueryのskitterで動いていす。skitterの動きはblindやcube等で人形の種類毎に変化をつけ、全部で6種類のskitterを使っています。アクセスはGoogleマップに加工をしています。

Smart Phone Site Sample 「WAVE立川ホーム」 温泉旅館「松雲閣」

左は、架空の住宅メーカー「WAVE立川ホーム」のスマートフォン(iPhone)用のサイトです。jQuery Mobileをベースにして、CSS3で上書きしてデザインをしました。複数ページを作成し、タップで遷移します。Mobile Safariでご覧下さい。

右は、架空の温泉旅館「松雲閣」のスマートフォン(iPhone)用のサイトです。PC版をベースにして、1ページ上に全ての内容を記載しました。ページ遷移はフリップアニメーションで動きます。jQuery MobileのTheme Rollerを使用してヘッダー、ボタンのデザインしました。Mobile Safariでご覧下さい。

WordPress Sample "Blog"

左は、WordPressでオリジナルのブログを作りたいと思い、参考書WordPressレッスンブックを利用し、自分なりにカスタマイズしました。
中は、WordPressの最新のデフォルトテーマであるTwenty Elevenをベースに、CSSでのカスタマイズを進行中のものです。
右は、参考書WordPressデザインブックを利用し、ブログから一歩進んだサイトの作成中です。
以上を通じてWordPressのカスタマイズを習得中です。

Web Sample "Dental Clinic" "Cake Shop" "Flower Shop"

WEB制作初期に作成した作品です。未熟なものもありますが、ご容赦ください。
① 左は架空の歯科診療所「Den Clinic」です。Flashを覚えた頃のものです。全体はグリーンで統一し清潔感をだしました。
② 中央は架空のケーキショップ「Den Confectionary」です。デザイン的には①を改良して作り込みをしました。色調はオレンジです。
③ 右は架空のフラワーショップ「LANCASTER」です。実験としてGoogleのWebフォントを使用し、手書き感覚のあるフォント「Miltonian」をヘッダーに読み込んでいます。ブラウザーの問題がなければうまく表示しますが、そうでない場合はデフォルトのフォントの表示になります。

Design Sample "Flash Movie"

Flashのガイド本を参考にいくつか作成しました。Webページのパーツとして使ってみたいですね。
① 左はアナログ時計のFlashです。文字盤等をデザインし、AS3.0で現在時間取得、移動角度指定で表示しています。
② 中央は宇宙イメージFlashです。中心の球体とリングの色が変化します。周囲の星は一部は円形に移動し色が変わります。吹雪風のオブジェクトがランダムに動きます。
③ 右は額縁アートのFlashです。額縁が動き、色も変化します。また中心の画像が変化します。