Tweet

Pocket

みなさんこんにちは、mayukouです。
webサイトをデザインする時に、ボタンは欠かせない要素ですね。
特に、ランディングページやECサイトなどによく使われます。

今回は、そんなボタンの作り方の記事をまとめてみました。

Photoshopでボタンを作る方法

ついつい押したくなる！立体的なボタンのデザインをPhotoshopで作る方法

これはSchooで紹介されていたボタンの作り方です。Photoshopのレイヤースタイルで

ちょっとしたグラデーションや、縁取りをかけます。

https://web-design-cafe.com/archives/655

ちょっと洒落てる！Photoshopで作る、白いシャドーが入った押したくなるボタンの簡単な作り方

最近は、こちらの方が感じがいいので多用しています。

webサイトの雰囲気がシャドー（影）の1pxで引き締まります。

https://web-design-cafe.com/archives/991

Illustratorでの作成方法

webデザインのトレンド！文字によって変形するゴーストボタンをイラレで作る方法

１、２年前からよくみる、ゴーストボタンの作り方です。

線を個別に描かなくてもIllustratorのアピアランスツールで
線が文字量に沿って自在に形が変わります。

https://web-design-cafe.com/archives/1036

webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法

上記のゴーストボタンの追記の記事です。囲み線の中心から文字が微妙にずれる問題を解決してくれます。

https://web-design-cafe.com/archives/1186

最後に

いかがでしたか？ボタンの作り方をまとめてみました。ぜひwebサイト制作に参考にされてください。

投稿者プロフィール

mayukou

Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

最新の投稿

この著者の記事一覧

• 2022.05.20jQueryfullpage.jsで全画面表示＆スクロールを実現できます。その方法をご紹介
• 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
• 2022.02.23デザイン人は色で判断している！？ブランディングにおける色彩設計の基本
• 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。