四角い画面の中に、丸い世界を
Webサイトのほとんどは「四角形」で構成されています。四角い画像、四角いボタン、四角いカード。それは効率的なレイアウトの帰結ですが、時として「窮屈さ」や「硬さ」を感じさせることもあります。
無料HTMLテンプレート『ORGANIC（オーガニック）』は、その四角形のルールをやわらかく崩したポートフォリオテンプレートです。画像の角は丸みを帯びた有機的なカーブで切り取られ、ベージュとグリーンの穏やかな配色が画面を包み、丸いフォントが文字を綴る。ここには直線の緊張感がありません。あるのは「自然体」という空気だけです。
デザインの特徴とこだわり
アメーバのような画像トリミング
『ORGANIC』最大の特徴は、画像のトリミング形状です。奇数番目の作品は左上と右下がゆるやかにカーブし、偶数番目は逆に右上と左下がカーブする。つまり、隣り合うカードの角丸が互い違いになり、画面全体にリズムが生まれます。
この形は自然界のアメーバや水滴、あるいは川で磨かれた石のような有機的なシルエット。四角いグリッドの中にこの形があるだけで、「自然」「手作り」「温もり」のイメージが自然に醸成されます。
プロフィール写真にも有機的カーブ
ヘッダーのプロフィール写真も単なる正円ではなく、不均一な楕円形にトリミングされています。しかもグリーンの影が右下にずれて落ちる、遊び心のある配置。まるで手でちぎった紙に写真を貼り付けたような、コラージュ的な楽しさがあります。
波型のフッター ― ページの終わりに「浜辺」のような曲線
フッターの上端はまっすぐな線ではなく、緩やかなアーチを描いています。白い背景に切り替わるこの波形は、ベージュの砂浜と白い波打ち際の境界線のよう。ページの終わりを「終了」ではなく「ここから先は、やさしい場所」として演出しているのです。
Zen Maru Gothic ― 角のないフォント
使用フォントの「Zen Maru Gothic（ゼンマルゴシック）」は、すべての角が丸く仕上げられたゴシック体です。画面上のすべての文字が丸みを帯びることで、テンプレート全体が「尖ったものが何もない空間」として統一されます。やさしく声をかけるような、穏やかなトーンが文字そのものから伝わってきます。
こんな方・こんな用途におすすめ
ハンドメイド作家・クラフター
陶芸、編み物、手縫い、木工。手で作るものには直線がありません。『ORGANIC』の有機的なカーブは、ハンドメイド作品の「手触り」をそのまま画面に映し出してくれます。
カフェ・ベーカリー・自然食品のブランドサイト
ベージュとグリーンの配色は、オーガニック食品やナチュラルカフェの世界観にぴったり。焼きたてのパンや季節の野菜の写真をアメーバ型のフレームに入れれば、それだけで空気感のあるブランドページに。
保育・教育・福祉関連のポートフォリオ
丸いフォントと柔らかい配色は、子どもや高齢者に関わる仕事のサイトにも安心感を与えます。「怖くない、やさしい場所」であることを、デザインの隅々から伝えることができます。
カスタマイズのヒント
アクセントカラーの変更
デフォルトのモスグリーンをテラコッタ（赤茶色）に変えると「秋の工房」のような温かみに、ラベンダーに変えると「春の園芸」のような明るさになります。アクセントカラーはプロフィール写真の影、フッターのボタンホバー、セクションタイトルなど複数箇所に反映されるため、一箇所変えるだけでサイト全体の季節感が一変します。
有機的カーブの形状変更
画像のトリミングに使われている角丸の値は設定エリアで変更可能です。値を均一に近づけると「やや丸い四角」に、さらに差を広げると「もっと不定形」に変化します。自分の作品の雰囲気に合わせて形を調整してみてください。
フリーテキストエリアの活用
ヘッダーとギャラリーの間にテキストコンテンツエリアが用意されています。タイトルと本文を自由に設定でき、活動の哲学や大切にしている価値観などを掲載可能です。テキストはプロフィールと同じ柔らかいフォントで表示されるため、サイト全体の温かみのあるトーンが損なわれることはありません。
まとめ ― まっすぐじゃなくていい。丸くていい
『ORGANIC』は、「効率」や「合理性」ではなく「心地よさ」を最優先にしたテンプレートです。画像は丸く、文字は柔らかく、色は穏やかに。四角い画面の中に、自然界のやさしさを再現する。
完璧な直線よりも、ちょっと歪んだ曲線のほうが人の心に近い。そう感じるクリエイターに、このテンプレートをお届けします。
