Herb Collage +

Cafe chouchoute: 2019/7/1更新

背景に動画を固定させながら、エフェクトをかけた画像をスクロールさせるシングルページサイトです

Gulpを走らせてSass（SCSS）をコンパイル、Autoprefixer、browserSync、加えてimageminなどを実行させています。(imageminで画像の圧縮のほか、svgの最適化を行っています)

SassではMixinで

media query

gradient color

を定義しています。

背景はbideo.jsをつかっておりますが、オリジナルのサイトとはだいぶ動きを変更しています。

URLサイトはこちらです

SVGをシルエットアイコンやヘッダーの背景に取り入れており、svgの軽量化、前述したgulp-imageminを活用してCSSにおけるカスタマイズ化、軽量化をを図っています。

7/1ｎ現在、レスポンシブデザイン、動きの確認をほぼ完成しております。これからコンテンツの充実とjQueryを使ったスクロールなど実装してまいりますしてまいります。

テスト中のWordPressサイトです

Bootstrap4をベースにしたUnderstarpの仕様をほぼ全部入れ替えて制作しております

Gulpを走らせてSassを使用している他、Bootstrapの変数をsass上でカスタマイズしております。

これからレイアウト・バナーも改変してまいります。レスポンシブデザインです。

Aromatherapy Salon Petit Chou Chou

Gridレイアウトで制作しております。レスポンシブ対応しております。

Gulpを走らせてSass（SCSS）をコンパイル、Autoprefixer、browserSyncを実行しています。

SassではMixinでメディアクエリを定義、呼び出しております。

ローカルではbrowsersyncを走らせ、プレビュー表示の高速化を図っております

URLサイトはこちらです

トップページにはスクロールと連携したフェードイン効果を導入しています。

トップページ以外はメインビジュアルにマウスオーバーで単純なエフェクトをかけてます。

今後はトップヘのスクロールボタン、より細かくUIデザインを詰めて参ります参ります。

製作期間 : ワイヤー・デザインカンプから公開まで約10日間弱

iPhone8を想定したアプリケーションデザインをコーディングしてます。

300x250のバナー試作です

unsplashの画像を頂いて2つの画像を一枚の画像に合成しました。

unsplashの画像はこちらとこちら

制作ツールはPhotoshop、注意を払った点は以下の3つです。

ラグジュアリーホテルに宿泊する落ち着いたイメージのバナー

カーニングを施したメリハリのあるタイポグラフィ

同系色のグラデーションを基調とした配色

電卓アプリの試作です

現在デスクトップにおいて動作確認すみ。数字キーをクリックするとボタンの角度がゆっくりと変わります

アイコンにマウスオーバーするとゆっくりとアイコンが大きくなります。

Bootstrap4をベースに制作しました。

WordPressで実装したクライアント様のページです。

現在のスキルセットをIllustratorで表現しました。

過去に手がけたクライアント様のweb siteです