なんか写真とかアート作品を見て、「これどうやって作ったんだろう？」って思うこと、ない？わたし最近、Finethoughtっていうオーストラリアのサイトで見つけた作品にすごく惹かれちゃってさ💭
パッと見はシンプルなのに、**細かい質感とか色の重なり具合が絶妙で、真似しようと思ったら意外と難しい…！**って感じなんだよね😳
Finethoughtってどんなサイト？
Finethoughtはアートやデザインを扱ってるクリエイターさんのサイトで、ナチュラルでありながらどこか洗練されたスタイルが特徴なんだ✨
特に目を引くのが、色の組み合わせや微妙な陰影の表現がすごく計算されてるけど、ごちゃごちゃしてなくてスッキリしてるところ👀
どうやってこういう雰囲気を作ってるの？
わたしも真似しようとしてみたけど、これが本当に奥が深い…！
- 色のグラデーションが自然なのに計算されてる感じ✨
- 細かいテクスチャーが重なってるんだけど、変に主張しすぎないところ💡
- 全体のバランスが絶妙だから、どこか「余白」の美学みたいなものも感じる🥺
一口に「シンプル」って言っても、実は計画的に色や形を配置しないとこうはならないんだなぁって実感したよ💭
うーん…本当はプロの技がいっぱい隠されてるのかも？
正直わたしには全部理解しきれてないけど、Finethoughtの作品を見てると、「やってみたい！」と思わせる魅力があるのがすごいなぁって思う✨
だからまたちょっとずつトライしてみようかなって感じ🥰
もし同じように「どうやってるんだろう？」って思った人がいたら、**試しに自分で色を重ねたり、軽くぼかしたりしてみるのおすすめ！**小さな発見があるかもだよ👍💗
わたしもこれから少しずつ勉強して、また面白いこと見つけたらシェアするね🫶🎀
はてな
コメント
クリス
背景はアスキーアートで、普通のフォント、テキストはクリップパスで箱に分けてJSで動かしてるよ。
ハンナ
面白いけど目が疲れるな。
グレース
GSAPでもできるよ。
ロバート
多分60個くらいの黒いdivを使ってて、高さ50pxで画面いっぱい、それぞれ長さを変えて右に動かしてる感じ。 素のJSとCSSでできるし、いい演出だね。
ハンナ
`prefers-reduced-motion`や`prefers-color-scheme`に対応してないから、正直「真似しない方がいい」って言いたい。
ロバート
見た目は悪くないよ。
キンバリー
タイポ効果以外に似たCodePenもあるよ。 複数レイヤーでマスクの速度違いや文字のグリッチ効果まで使ってて、追加のマスクブロックを左右に動かせば再現可能。
リリー
彼は長年腕を磨いてきたんだろうね。
ハンナ
印象的だけど、標準的なルールをもう少し守ってほしい。 クリックできる場所がわかりにくいし、リンクにいるのかタブ移動でわかりづらい。 端末風のアイデアはいいけど、そこまで忠実じゃなくてもいいし、タブの階層や動きも本物の端末やIDEとは違う。 採用するなら高度なビジュアルは作れるけど、アクセシビリティ面は心配だな。 それでも面白い作品には違いないよ。
