Webデザイン記事一覧

セレクトボックスとラジオボタンはどう使い分ける?
詳細を見る

Webコーディング

セレクトボックスとラジオボタンはどう使い分ける?

Web制作をしていると、フォームで選択肢のどれかひとつを選択して欲しいとき、セレクトボックスとラジオボタンの使い分けに悩むこと、ありませんか? 「他のサイトがそうしていたから」などといったなんとなくの感覚でフォームの形式を選んでしまっているのが正直なところ。 今回はそんなセレクトボックスとラジオボタンの使い分けに境界線をつけるべく、再度考えてみました。 セレクトボックスとラジオボタン、それぞれの特 […]
商用完全無料で使えるアイコンサイト4選
詳細を見る

Webコーディング

商用完全無料で使えるアイコンサイト4選

Webサイトのデザインのクオリティを保ったままアクセシビリティを向上させるためにアイコンが使われることが多くありますが、皆さんはどのような基準でアイコンを選択しておりますでしょうか? 掲載されているアイコンの数だったり、デザインツールでプラグインが使えたりなどの利便性で選んだり… 今回はアイコンサイトを3つ紹介します。 Material Icons(1,300以上) Webサイト制作では王道となっ […]
【学習コストほぼゼロ】LottieFilesことはじめ。イラストアニメーションをWebサイトに導入しよう。
詳細を見る

Webコーディング

【学習コストほぼゼロ】LottieFilesことはじめ。イラストアニメーションをWebサイトに導入しよう。

近年、アニメーションを利用したリッチな表現のサイトが増えています。 動画をWebサイトに載せるのはサイトが重くなってしまったり、JavaScriptでのアニメーションは学習コストが高くなってしまう傾向にあります。 GIFも検討のはいいけれど、画質が悪いことも。 そこで、あらかじめアニメーションが施されたイラストをLottieFilesとしてダウンロードすることで簡単かつ軽量でWebサイトに導入する […]
jquery.cookie.jsでCookieを手軽に扱う
詳細を見る

Webコーディング

jquery.cookie.jsでCookieを手軽に扱う

Webサイトの制作において、JavaScriptで制御した挙動を保持しておきたいとき、ありませんか? JavaScriptでの制御はページ遷移後にブラウザバックするとデフォルトに戻ってしまうので、場合によってはユーザーのアクセシビリティを下げてしまうことも。 そこでCookieを利用することを提案します。 そんなCookieを手軽に扱えるのがJavaScriptライブラリ「jquery.cooki […]
みていて楽しい、おしゃれなWebデザインギャラリーサイト3選
詳細を見る

Webコーディング

みていて楽しい、おしゃれなWebデザインギャラリーサイト3選

Web制作の仕事をしている人なら一度は閲覧したことがある「Webデザインギャラリー」ですが、どのようにして選んでおりますでしょうか。 更新頻度や機能性はもちろん、「おしゃれさ」にも注目してみませんか? 今回はセンスが光るおしゃれなWebデザインギャラリーを紹介します。 MARP Web制作会社「M-HAND」が手掛けるサイト Web制作会社の「M-HAND」が手掛けるWebデザインギャラリーです。 […]
Safariでサイトを開いたときにMaterial Iconsのアイコンが表示されない時の対処法
詳細を見る

Webコーディング

Safariでサイトを開いたときにMaterial Iconsのアイコンが表示されない時の対処法

コーディングして、ブラウザで確認する際に「Safariだけアイコンが表示されない!」といった問題に直面したことはありませんか? その問題、CSSに記述を追加するだけで対応できます! 前提条件 この記事を理解するにあたって アイコンフォントがきちんと読み込まれている Google Chromeでは表示されているが、Safariで表示されなくなった Bootstrapでもこの方法で治るかも(治らないか […]
Figmaでオブジェクトを合成してキラキラアイコンを作ろう
詳細を見る

Webデザイン

Figmaでオブジェクトを合成してキラキラアイコンを作ろう

以前、「XDでシェイプの合成を使ってキラキラアイコンを作ろう」という記事を書きましたが、AdobeがXDの単体プランの取り止めを行い、XDを全面的に押し出すことは無くなってきているため、Figmaでのキラキラアイコンの作成方法を紹介いたします。 基本的な作り方はXDと同じ 基本、以下の記事のStep1〜Step3はほとんど同じになります。 まとめると Step1 : 正方形を作る Step2 : […]
Adobe XD 「シェイプの合成」でキラキラアイコンを作ってみよう!シェイプの合成についても解説!
詳細を見る

Webデザイン

Adobe XD 「シェイプの合成」でキラキラアイコンを作ってみよう!シェイプの合成についても解説!

突然ですが、遊び心やあしらいに “キラキラアイコン“を使いたいと思ったことはありませんか? Font AwesomeやMaterial Iconsにもあったりなかったりしますが、この”キラキラアイコン”、XDと発想の転換で自作できちゃうんです。 目標:背景色や大きさ、枠線、縦横比を変更できるアイコンを作る 今回目標とする形は画像のようなキラキラです。 […]
なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ!制作着手前のステップも公開!
詳細を見る

Webコーディング

なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ!制作着手前のステップも公開!

近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。 その中でも気になったのが、 ナビゲーションのリンク切れ ページのコンテンツが途中 リンク遷移先が他と同じページ といった「完成していない」ポートフォリオサイトが散見されます。 そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。 完成もされていないので、メンテナ […]
flexboxの救世主「gap」プロパティが左寄せデザインに超便利!
詳細を見る

Webコーディング

flexboxの救世主「gap」プロパティが左寄せデザインに超便利!

突然ですが、以下のようなレイアウトを作るとき、どのような実装をしますか? 3列の横並びボックス 間のマージンは10px 改行すると左寄せ 下部にはマージンは必要なし flexを利用する方法、いくつか思いつきますよね。 でも、gapプロパティを利用すれば簡単に実装できちゃうんです。 すぐに確認したい方は目次から「gapプロパティを使用しましょう」のアンカーリンクをクリックしてください。 それぞれ例を […]