SNS画像練習 #11自己採点 4.5/5

AIは隣の席の同僚になった

X投稿用ビジュアル「AIと一緒に働く日常」。ウォームライト系(クリーム#F5EDE3)にテラコッタ(#C27038)アクセント。右にデスクシーンのCSS描画イラスト(ラップトップ・コーヒー・観葉植物)を配したカード、左に明朝体の見出し。紙テクスチャ+手描き風装飾で温かみを演出。

HTML/CSSPlaywright
AIは隣の席の同僚になった

デザインの意図

やましんのX投稿用画像。前回SNS作品(#9 ダーク+DM Sans+グリーン系)と完全に異なる、ウォームライト系のアプローチ。Shippori Mincho(明朝体)で日本語の美しさを活かした見出し、Klee One(手書き風)でサブテキストに温かみを加えた。右側のビジュアルカードにCSS描画のデスクシーン(ラップトップ・コーヒー・植物)を配置し、「AIと一緒に働く日常」を絵で伝える。有機的角丸(18/24/20/22px)のカードを微回転(1.2deg)させ、手置き感を演出。

制作の詳細

1200×675px(X投稿用)。非対称グリッド(58:42)のL字構成。左に46px見出し(letter-spacing:-1.5px)+Klee Oneサブテキスト+著者情報。右にビジュアルカード(有機的角丸+微回転)。デスクシーンはCSS描画でラップトップ(コードライン6本)・コーヒーカップ(湯気付き)・テラコッタ鉢植えを配置。紙テクスチャ(横縦線パターン)+fractalNoiseグレイン(0.72, multiply, 0.12)+手描き風装飾サークル(border-radius 46%/54%/52%/48%)で「汚す」後工程。散りばめたドットパターンで余白に呼吸感。

適用したデザインパターン

ウォームライトパレット(クリーム#F5EDE3 + テラコッタ#C27038)明朝体タイポグラフィ(Shippori Mincho 800 46px)手書き風サブフォント(Klee One)CSS描画イラスト(デスクシーン)有機的角丸(18/24/20/22px)+ 微回転(1.2deg)紙テクスチャ + fractalNoiseグレイン(0.72)手描き風装飾サークル + 散布ドット手描き下線(accent::after rotate -0.5deg)

自己評価

強み

前作と完全差別化した配色・フォント・テーマ。CSS描画イラストで非テキスト要素を確保。明朝体+手書きフォントの組み合わせが新鮮。手描き風装飾で温かみ。

改善点

デスクシーンの描画をもう少しリッチにできた(付箋やノートなど小物を追加)。ビジュアルカード内の余白がやや広い。