【勝手にWEBサイトレビュー#28】画像の枠にこだわりのあるポートフォリオサイト

こんにちは!

Webデザインアワードで入賞しているWebサイトのご紹介第28回です。

今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます!

https://www.sketchy.media/

今回ご紹介するのは、フルスタックデザイナー、ブランディングをしている人のポートフォリオサイトです。。
Awwwardsに入賞しています。

▼Awwwards掲載ページ
https://www.awwwards.com/sites/sketchymedia-building-brands

真似したいポイント

初代photoshopのような画像の枠線

サイト内のほとんどの画像には初代macのphotoshopのUIを連想させるようなフレームが付けられています。
デザイナーらしいコンテンツに寄せて遊び心を取り入れているのは面白くて、真似してみたいなと思いました。

すごい!と思ったポイント

実績のメニューの見せ方

実績が並べられたメニューのテキストにマウスカーソルを乗せると、その実績の写真が表示されます。
リンク先へ飛ばなくても画像を見て内容がわかると、そのままリンク先へ飛んでみたくなる工夫だと思いました!

カーソルに合わせた動きげのこだわり

WORKS部分のカーソルに合わせて動く画像が、Illustratorやphotoshopのキャンバス上でオブジェクトを動かしている感覚に近い動きとなっています。
画像のフレームのデザインと雰囲気を合わせているような動きで遊び心が面白いです!

まとめ

知っている人が見ると「あ!あの時のphotoshopだ!」と思わせてくれるような遊び心が満載なサイトでした!
今回ご紹介した部分以外にも面白い部分がたくさんあるので、ぜひ見てみてください!

前回のレビューはこちら!

0

関連記事

  • 2021.05.04

    【勝手にWEBサイトレビュー#32】建築とWebのデザインが調和している!ポルトガルの建築デザインスタジオのWeb……

    サイトレビュー

  • 2021.04.30

    【勝手にWEBサイトレビュー#31】映像の見せ方が多用な映像制作会社のコーポレートサイト

    サイトレビュー

  • 2021.04.23

    【勝手にWEBサイトレビュー#30】スタイリッシュかつ見やすい!ギリシャにあるオープンスペースの紹介サイト

    サイトレビュー

おすすめ記事

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!