簡単プチ改造！角丸デザインをマスターしてサイトを垢抜けさせよう

こんにちは、デザイナーのオモトです。
今回は、ホームページ制作サービスのBiNDupの人気テンプレートをちょっとの手間でトレンド感のある素敵なデザインのサイトにカスタマイズする方法をお伝えします。

Webデザインの定番！実は脳に優しい「角丸デザイン」

Webデザインに限らず、スマホアプリなどでも、角を丸めたデザインを見かける機会が多くなってきました。
角丸は、脳が疲れず認知の処理が速い形として注目されていて、AppleのプロダクトやUIデザインに多く採用されています。
そしてここ数年はボタンやUIの角を丸めるだけでなく、サイト全体に大胆に角丸を使用するデザインも増えてきたように思います。もはやデザインの１つとして定着していますね。

完成サイト

カスタマイズのベースには、音楽イベントでのCDの販売を想定した「ABSTRACT RECORDS」のテンプレートを使います。
以下が完成サイトです。多少ページ構成と余白の調整をしていますが、基本は以下で説明しているカスタマイズを実行しただけ。
元のテンプレートもスタイリッシュですが、角丸のアレンジを一手間加えたことで視線の流れがせき止められる感じがなくなり、思わずスクロールしたくなる、見ていて気持ちの良いデザインになりました。

サンプルを見る

角丸、半円、円にデザインする方法

1. ビルボードの右下を角丸に

エリアによって角丸の処理を使い分けるとデザインにリズムが生まれます。ビルボードでは控えめに右下だけを角丸にします。「デザイン編集」ボタンをクリックし、サイト全体に適用されているDressを開きます。「ビルボードエリア」に対して、「角丸（右下350px）」と「余白（外側の余白・右側10%）」を指定します。

2. ブロックの片側を半円に

真ん中のブロックは半円にします。角丸にしたいブロックを開き、ブロックDressを適用します。ここでは、ブロックDressを新規に作成したいので、その他のDressを選択します。（既にブロックDressが設定されている場合は、設定されているDressに追加していきましょう。）
次に「新規作成」し、「全体」に「角丸（左上・1000px、左下・1000px）」と「余白（左側に10%）」を指定します。これでブロック全体が角丸になります。
角丸の数値はオーバーな数値をしておくと、ブロックの内容が長くなっても角丸を維持することができます。
逆に角丸の設定を右上・右下に設定すると、右側が半円になります。
※このブロックの背景のみ別の色に設定しておかないと、角丸になっていることがわかりづらいので注意しましょう。

3. 正方形の画像を円に

CSSでは、正方形の四隅を丸くすることで、円を表現することができます。この仕組みを利用して、ブロック内の画像だけ丸く切り取った形になるようにしていきます。
上記同様に、ブロックDressを新規作成し、「画像の囲み > 画像」に「角丸（「四隅とも同じにする」にチェック。1000px）」を指定します。
これで完成です。

サンプルのダウンロードデータを用意

いかがでしたでしょうか。角丸を使うだけでも見た目の印象が変わることを知っていただけたかと思います。簡単なので覚えておくと便利ですよ！
以下にて、今回紹介したサンプルサイトのサイトデータを配布します。そのまま使うのはもちろん、設定内容の確認などにお役立てくださいね。

サイトデータは2019年10月1日にアップデートした最新のBiNDup環境でお使い頂けます。
※サイトデータのダウンロードにはログインが必要です。