新着情報一覧news
-
Parts 04 > Design 02作品名：モーダル02
クリックする → ページ遷移する → 遷移先のページを閲覧する → 元のページに戻る。この一連の流れを、少しだけ簡素化してくれる「モーダル」。今回は、HTML・CSS・JavaScriptの基本に改めて立ち返りながら、モーダルを試作しました。以前よりも（自分なりに）汎用性を意識した構造で、再利用しやすいコード設計にしました。今後も、「モーダルによって何を表現できるのか」を学びながら、段階的に応用力を高めていければと思います。
デモをみる
-
Parts 07 > Design 09作品名：ビデオ表示の演出
前作「Parts 07 > Design 08 作品名：画像表示の演出」の画像を、ビデオに変更して、横からスライドインするアニメーションを作成しました。
デモをみる
-
Parts 07 > Design 08作品名：画像表示の演出
画像が横からスライドインするアニメーションを作成しました。要素の上端が、画面の下端に到達したタイミングで表示が開始されます。
デモをみる
-
Parts 07 > Design 07作品名：パララックス 画像
スクロールに応じて、画像がゆっくりと動くパララックス効果（視差効果）を実装しました。
デモをみる
-
Parts 07 > Design 06作品名：見出し 02
getBoundingClientRectで要素の位置を取得して、ページのスクロールに応じて、要素に対して透明や不透明、ぼかしなどを適用させました。
デモをみる
-
Parts 07 > Design 05作品名：スクロール&ビデオ
ScrollyVideoというライブラリーを利用して、ページのスクロールに合わせて、ビデオが動くページを作成しました。今回のビデオ素材はシンプルなものですが、今後、他の素材でもつくりたいと思います。
デモをみる
-
Parts 07 > Design 04作品名：見出し
画面下の10%の位置で、見出しの文字が、透明から不透明になり始めます。そして画面上の10%で、完全に不透明になるように指定しました。
デモをみる
-
Parts 07 > Design 03作品名：お悩みの声 02
「お悩みの声」のsectionが画面に入ったら、JavaScriptが発動して、背景色を「指定したスクロール量に応じて」黒に変更するように指定しました。また、テキストは「指定したスクロール量に応じて」ぼかし状態からくっきり見えるように指定しました。
デモをみる
-
Parts 03 > Design 05作品名：テキスト 05
画面中央に固定されたオープニングアニメーションで、フェード、スケール、テキストシャドウを指定して、順番にテキストを表示し、最後に自動的に非表示になり、スムーズにコンテンツへ誘導します。
デモをみる
-
Parts 03 > Design 04作品名：テキスト 04
テキストと背景に別々のアニメーションを適用。CSSのbeforeと、afterの擬似要素を使って、スライド演出とフェードアウトのオープニングアニメーションを表現しました。
デモをみる
-
Parts 03 > Design 03作品名：テキスト 03
ご職業とお名前を順に表示しながら、最後に背景が下から上へスライドして消えるオープニングアニメーションを作成しました。フェードとスライドを組み合わせ、印象的な“始まり”を意識しました。
デモをみる
-
Web Site > Design04作品名：スタッフ紹介 特設サイト
今回は、前作「Web Site > Design02 作品名：コーディング 02」をアレンジして、「スタッフ紹介特設サイト」を制作しました。ファーストビューに用いた画像を、角丸にして配置しました。
デモをみる
-
Parts01 > Design10作品名：バナー とび技能士
フォトショップのトリミング、調整レイヤー（トーンカーブ、色相彩度、レベル補正）、レイヤー効果（光彩外側）、フィルター（ぼかしガウス）を使って、「とび技能士、足場の組み立て等作業主任者」のバナーを制作しました。
デモをみる
-
Parts01 > Design09作品名：バナー 宅地建物取引士
フォトショップのトリミング、調整レイヤー、レイヤー効果等の機能を使って、宅地建物取引士のバナーを制作しました。
デモをみる
-
Parts01 > Design08作品名：バナー セミナー
フォトショップのトリミング、調整レイヤー、レイヤー効果等の機能を使って、セミナーのバナーを制作しました。
デモをみる
-
Parts01 > Design07作品名：バナー スポーツジム
フォトショップのトリミング、調整レイヤー、レイヤー効果等の機能を使って、スポーツジムのバナーを制作しました。
デモをみる
-
Parts01 > Design06作品名：バナー 熊出没注意
イラストレーターのブラシ機能でバリケードテープをつくり、フォトショップで森をゴシックホラーな雰囲気にして、熊出没注意の画像を制作しました。
デモをみる
-
Parts01 > Design05作品名：写真をアニメ風仕上げ
フォトショップでHDRトーン、ハイパス、油彩、描画モード、グラデーション、トーンカーブを使い、写真をアニメ風に仕上げることに挑戦しました。
デモをみる
-
Parts07 > Design02作品名：お悩みの声
画面をスクロールした際に「お悩みの声」のsectionが画面内に入ったら、背景色を黒に変更するように指定しました。またテキストは、ぼかし状態で画面内に入り、スクロールに応じてくっきり見えるように指定しました。
デモをみる
-
Parts01 > Design04作品名：写真をスケッチ仕上げ
フォトショップで、調整レイヤーとフィルターギャラリーの機能を使い、写真を鉛筆画のような質感に仕上げました。
デモをみる
-
Parts02 > Design02作品名：動画&名刺
動画素材を使って、名刺型のレイアウトに埋め込みました。
デモをみる
-
新年あけましておめでとうございます。この度、ウェブサイトを立ち上げました。このサイトは、私がウェブデザインについて学んだ内容を、アウトプットする場として活用してまいります。まずは、これまで学んで試作してきた作品を少しずつアップしていく予定です。今後ともよろしくお願い申し上げます。