2020年の流行間違いなし!
CSS&jQuery 8選

更新日:
2019/03/13 
公開日:
2019/03/13

2020年の流行間違いなし!
CSS&jQuery 8選

目次

初めに…実習生のこと
を知っていますか?

職業訓練校「Webデザイナーコース」で出会った3人。それぞれのポートフォリオをまずはご紹介。

Coffee Roast

Coffee Roast 藪内 恭亮

珈琲豆と珈琲スタンドのお店のホームページです。自宅で珈琲を淹れることにチャレンジしたい人をサポートする内容を盛り込むことで販売数増加に寄与できれば、と考えました。時間や金銭的に余裕のある40代前後の女性をターゲットに、落ち着いた雰囲気になるよう作成いたしました。

ハルPhoto

Haru 振袖写真の専門家 太良 瑠美

Haruという、和装の記念写真を撮る方のホームページを作成いたしました。(ホームページは実際に使われておりませんが、実存する個人事業主の方です。)お子様のいらっしゃる40代女性の方をターゲットにし、撮影件数UPを目的に作成いたしました。

CREATOP

CREATOP 渋谷 貴子

「世の中に散らばるクリエイターたちを集めたい」をコンセプトに作成いたしました。とにかく若い才能溢れる変人を集める事から、モノクロカラーに、アクセントでレッドを入れ、刺さる人にしか刺さらないデザインにいたしました。

クールでスポーティーな見せ方3選

文字が数秒ごとにパッパッと切り替わるインパクト抜群なアニメーション。「ここは見せ たい」という部分のアクセントに良いかも。
(https://www.youtube.com/watch?v=nRw7QAGdAC4&feature=youtu.be より引用)

ホバー時、文字が右上へボタンのように浮き上がるアニメーション。クールかつポップな 仕掛けとして重宝しそう。
(https://www.youtube.com/watch?v=-zz1EV35WK0&feature=youtu.be より引用)

お問い合わせフォームの常識を覆す、ダークベースのデザイン。ライトブルーがよく映え、 システマチックでクールです。
(https://www.youtube.com/watch?v=uGx9J4zRf2U&feature=youtu.be より引用)

上記3つのアニメーションを複合して
できたサイトがこちら!

クールでスポーティーなサイト

クールでスポーティー

スタイリッシュクールを目指したサイト。 ベースカラーをブラック、強調したい文字をゴシック体でよりクールに。
スポーティーなだけでなく、どこか大人の雰囲気を感じられるような仕上がりにしました。

- 広告 -

ファッショナブルな見せ方2選

スクロールすると徐々に人物が見える、ファッションサイト向きのアニメーション。ファッションだけでなく、化粧品やブランド商品 等の見せ方に最適。
(https://www.youtube.com/watch?v=yJsOXvZhLVk&feature=youtu.be より引用)

これぞまさにインスタ映え!と飛んできそうなアニメーション。ワンポイントを目立たせることで、視線を集めます。モノクロベース のサイトには最適かもしれません。
(https://www.youtube.com/watch?v=RoXHjac0vX0&feature=youtu.be より引用)

上記2つのアニメーションを複合して
できたサイトがこちら!

ファッショナブルなサイト

ファッショナブル

お洒落なだけでなく、何回も訪問したくなるを目指したサイト。 クリックで変わるドレス色は、カラーバリエーションが多い服や雑貨などに使用すると、 遊び心を持たせつつ、ワンポイントに。海外製品を取り扱うサイトにはぴったりかもしれません。

遊び心満載な見せ方3選

「おっ?!」と目を引くような、波のアニメーション。水族館や夏のイベントサイトのアクセントとして取り入れると面白いかも。
(https://www.youtube.com/watch?v=hvzvolGvazw&feature=youtu.be より引用)

ホバー時にカードがめくれるような目を引くアニメーション。イベント案内や、商品説明の表現として使えそうです。
(https://www.youtube.com/watch?v=M7Dae-7nfow&feature=youtu.be より引用)

マウスに合わせてスクラッチができる、遊び心満載のアニメーション。大人も子どもも楽しめるちょっとした仕掛けとして流行する予感がします。
(https://www.youtube.com/watch?v=l1MkpvzBn2o&feature=youtu.be より引用)

上記3つのアニメーションを複合して
できたサイトがこちら!

水族館のサイト

水族館

「とにかくギミックが可愛くて、面白い!」を目指したサイト。 水族館だけでなく、海水浴場やプールなど夏レジャーにもってこいのギミックがいっぱい。
アニメーションの細かな調節の際、主にコード面で力を注いだサイトです。

終わりに

1ヶ月という短い期間でしたが、業務の中で様々な経験をさせて頂き、ありがとうございました。
現場でのスピード感や規則、チーム制作の進め方など幅広い方面から学ばせて頂きました。
毎日とてもやりがいがあり、本当に充実した一ヶ月でした。大変感謝しております。
私達3人を受け入れて下さったこと、丁寧にご指導・ご鞭撻頂けましたこと、心からお礼申し上げます。
本当にありがとうございました!