人が美しいと感じる比率、フィボナッチ数列でパディングを設定するフォントサイズとボタンの高さの基準から、上下のパディングがある程度決まります。そこから、左右のパディングに根拠あるルールを定めます。その根拠は、こちらも伝家の宝刀「黄金比」を使用します。黄金比は人間が美しいと感じる比率として有名で、ロゴなど多くのデザインで取り入れられています。黄金比はフィボナッチ数列の隣り合う比と一致します。その比率をボタンのパディングでも取り入れることで、本能的に美しいと感じるボタン比率になるという考え方です。:https://www.youtube.com/watch?v=Sw3_E6iLCCM例えば、上下のパディングが12pxの場合、フィボナッチ数列から1:2を採用すると左右のパディングは24pxになり、1:3を採用すると36pxになります。ここでのポイントは、上下のパディング及びフォントサイズを4の倍数にしておくことです。することで必然的に左右のパディングも4の倍数になりますし、要素全体も4の倍数で設計しているので、ボタンを設置した要素感でも4の倍数になる機会が多くなります。この考え方は、ビジュアル面での美しいサイズ感と、整然と並ぶ機会を増やす設計であるため機能美という点でも前述の考え方より優れていると、個人的には考えます。この考え方のメリットとしては上記のとおりです。デメリットは思い当たる点が個人的にはありませんでした。まとめ今回はボタンの幅について定義する材料を考察してみました。WebデザイナーやUIデザイナーとしてデザインする際は、なぜこのデザインであるかの説明する責任が伴います。「何となく〜」や「いい感じに〜」と言った根拠のない説明では、非デザイナーは特に納得してくれません。フォントやカラーや余白などのデザインの基本要素はもちろん、各コンポーネントなどデザイン要素について細かい定義を設定することは、デザインに機能美と一貫性を提供するとともに、運用面でもメリットがあります。デザイナーであれば、見える箇所を作るのは容易だと思いますが、見えないところを突き詰めることでデザインのディテールが上がってくるのだと考えています。冒頭でも言ったように現時点では、今回の内容が正解か不正解かわかりませんが、常に当たり前に疑問をもって最善なデザインになるように、日々考えながらデザインすることは大切だと思っています。クリエイティブスタジオnadiaの公式noteです。凡ゆるデジタルコンテンツ(Web/App/Graphic/xR/VUI/etc)を創出し、お客様の課題をデザインの力で解決していきます。クリエイターへのお問い合わせフィードバッククリエイターの。