アーカイブ: コラム

以前の記事で便利なジェネレーター4選を紹介しましたが、Web制作を補助してくれるジェネレーターは他にもたくさんあります。今回は前回の記事では紹介しきれなかったジェネレーターを新たに4選ご紹介したいと思います。

過去記事：「面倒なコーディングを手軽に実装！便利なジェネレータ4選！」

最初からジェネレーターに頼ってしまうのは、基礎が疎かになってしまうので良くないですが、勉強して理解したうえでなら、作業効率をあげるためにも活用した方が良いと思います。ぜひ皆さんの制作現場でも役立ててもらえればと思います。

1. Smooth Shadow

https://shadows.brumm.af/

きれいなbox-shadowを作成できるジェネレーターです。通常、手入力でbox-shadowプロパティを使用する際は影を1つだけ指定すると思いますが、box-shadowは影を複数指定することが可能です。複数の影を指定することで、よりリアルなドロップシャドウを作ることができるのですが、手入力で調整するのは大変ですよね。このジェネレーターを使用すると重ねる影の枚数を調整したり、全体のぼかし具合をベジェ曲線で一括編集することができます。

いつものドロップシャドウとは違う印象にしたい、リアルなシャドウを表現したい場合はこのジェネレーターをおすすめします。

2. Clippy

https://bennettfeely.com/clippy/

コンテンツを切り抜く（クリッピング）ことができるclip-pathを作成してくれるジェネレーターです。clip-pathプロパティを使用すると三角形や台形、ひし形など好みの形状をCSSのみで作成することができます。clip-pathの指定を手入力で行うのは大変なので、通常であればSVG画像を用意したりしますが、このジェネレーターを使用すると基本形状を選択して頂点移動をするだけでコードを作成することができます。

背景画像はClippyを使用して簡単に切り抜くことができるので、今まで試したことがない方はぜひ使用してみてください。

3. Dashed Border Generator

https://codepen.io/amit_sheen/pen/xxZeyjO

CSSで点線や破線のボーダーを作成できるジェネレーターです。しかし、ボーダーといってもborderプロパティではなくbackgroundプロパティを使用した方法になります。borderプロパティでも点線（dotted）や破線（dashed）は作成できますが、点線や破線のサイズや長さを調整することはできません。backgroundを使用することで、borderよりも自由度の高い破線や点線を表現することができます。しかし、このbackground指定を手入力で行うのはかなり大変なので、構造を理解したうえでジェネレーターを活用するとよいでしょう。

4. Easings

https://easings.co/

CSSアニメーションに緩急をつけるイージング設定を、実際の動きを見ながら作成できるジェネレーターです。ボタンのhover変化やカルーセルスライダーのアニメーションを設定する際は、通常transitionプロパティを使用しますが、transitionのイージングには「linear」「ease」「ease-in」など全部で5種類しかありません。もっとメリハリのある動きにしたい場合は、cubic-bezier（3次ベジェ曲線）を使用することで設定できますが、数値入力で調整する必要があり、かなり大変です。このジェネレーターはあらかじめ用意された様々なイージング設定を、カルーセルやサイドメニューといったサイトUIで動作確認できるのが非常に便利です。「linear」や「ease」の動きが退屈だなと思う方はぜひ試してみてください。

おわりに

今回はコーディングに役立つジェネレーターを紹介しました。
使用すれば時短になってとても便利ではありますが、冒頭でも述べた通り、始めからジェネレーターに頼ることはおすすめしません。コードをいちから書ける必要はないですが、少なくとも構造を理解したうえで利用した方が、あとで修正を加えたい時やきちんと表示されなかった時の解決が早くなります。
基本を理解したうえで作業を効率化するためにうまく活用していきましょう。

デザイン制作においてイラストを取り入れることは、情報をより伝えやすくしたり、印象をガラッと変えたり、華やかさを加える手段として有効です。
ただ、イラスト素材は画像素材よりも製作物の求めるイメージに合わせることが重要なため、様々なテイストのイラスト素材をストックしておくといざというときに便利です。
そんな中でも、今回は使いやすさを重視したシンプルなフリーイラストを提供しているサイトをいくつかご紹介します。

1. Loose Drawing

Loose Drawingは、キレイめな手書き風のイラストが特徴的です。
ありそうでなかなか見つけられなかった！というような珍しいシチュエーションのイラストが多く用意されています。
5色のカラー展開と、線画のみのパターンから選択できます。

 
配布形式：PNG

利用規約：https://loosedrawing.com/contact/

2. ソコスト

ソコストは、柔らかくかわいらしさも感じる魅力的なイラストが揃っています。
イラストのテーマカラーをカラーコードで変更することができるうえに、線画のみと線画なしのパターンも選択できるのでかなり使い勝手がよいです。

 
配布形式：PNG / SVG / EPS

利用規約：https://soco-st.com/guide

3. Linustock

Linustockは、現場の生の声から「加工しやすい」「使いやすい」「見つけやすい」を追求して作られたサイトです。
線のみで白黒のシンプルでオシャレなイラストが多数揃っています。
加工のしやすさに重点を置いており、パスもアウトライン化されていないのが特徴です。

 
配布形式：PNG / EPS

利用規約：https://www.linustock.com/termsofuse

4. 凡デザイン

凡デザインは、一筆書きのようなラフな雰囲気の線画イラストが揃っています。
「ビジネス」や「スポーツ」など、汎用性の高いカテゴリーからイラストを探すことができます。

 
配布形式：PNG

利用規約：https://bon.design/guide/

5. SASHIE

SASHIEは、「シンプルでクセのない主張を抑えたトーン」を目指したイラストが用意されています。
ポーズや表情、シチュエーションがとてもユニークなイラストが特徴的です。

 
配布形式：PNG / SVG

利用規約：https://sashie.org/terms-of-use/

6. Tech Pic

Tech Picは、その名の通りテック系のイラスト素材サイトです。
自動運転車やIoT家電など、なかなか見つけづらい近未来のアイテムのイラストが多数用意されています。

 
配布形式：PNG

利用規約：http://tech-pic.com/agreement

おわりに

今回は、商用利用可能なシンプルで使いやすいフリーイラスト素材サイトをご紹介しました。
気になるものがあれば、ぜひブックマークしておくことをおすすめします。
イラストを使用する際は必ず利用規約を読み、利用規約に反しない形で使用しましょう。

コーディングをする時「このHTMLタグの組み方でいいのだろうか？」「どのように組むのがベストなんだろう？」と疑問に思うことがありますよね。どんな業界・業種でもWebサイトを構成するパーツは共通なのに、毎回イチから考えて作るのは効率が悪いです。

優れたデザインのサイトを参考にソースコードを調べていくのもありですが、ひとつひとつ確認していくのは大変です。すでに多く利用されているパターンがあるのであれば、それを参考にするのが一番ですよね。そこでオススメする学習方法が「CSSフレームワーク」です。

「CSSフレームワーク」にはサイトでよく使用される共通パーツがコンポーネント集としてまとまっており、各パーツの書き方を学習するには一番お手軽な方法かと思います。今回はそんな学習に役立つCSSフレームワークを紹介したいと思います。

1. CSSフレームワークとは

「CSSフレームワーク」とは、Webサイトに必要なパーツがあらかじめ揃ったパーツ集のようなものです。見出しやボタンといった基本パーツから、アコーディオンやフォーム、モーダルといったものまでテンプレートとして用意されています。それらのパーツを組み合わせることで、手軽にキレイなサイトが作れるようになっています。

CSSフレームワークのサイトには各パーツの使い方をまとめたドキュメントページが用意されており、そこにはHTMLのサンプルコードが記載されています。現在はレスポンシブ対応も踏まえたHTML構成になっていることが多いため、拡張性の高い書き方を手軽に学習することができます。また、class名の付け方などもコーディングで迷うポイントなので参考にすることができます。

※ CSSフレームワークを利用したサイトは類似したデザインになりやすく、会社サイトやサービスサイトを作るのには向いていません。デザイナーが不在の場合や、一般ユーザーが目にすることのない社内管理システムなどで利用されるケースがよくあります。

2. CSSフレームワークの紹介

今回はコーディング学習用としての紹介ですので、導入方法などの説明は割愛します。

2-1. Bootstrap

Twitter社が開発したCSSフレームワークです。世界でも人気のCSSフレームワークで、名前は知らなくてもデザインはどこかで見たことがある、という方もいるのではないでしょうか。

Bootstrapのドキュメントページはこちら。
https://getbootstrap.jp/docs/5.0/getting-started/introduction/



左サイドバーにカテゴリー別にパーツが紹介されています。他のCSSフレームワークと比較してもBootstrapのドキュメントは見やすく整理されており、日本語対応しているので読みやすいです。学習するのにいくつか参考になるパーツを紹介します。

カード

「お知らせ」等でよく使われるカードレイアウトです。このような定番パーツのコードは、どのCSSフレームワークでもほぼ同じ構成となっているので、最初にBootstrapで基本の型を学習しておくのがオススメです。class名の付け方もBEMに変換しやすく参考になります。

アコーディオン

「よくある質問と回答」等で使われるアコーディオンです。サイトで使用する頻度は高いですが、イチから作ろうとすると少々手間がかかるパーツです。ただし、デザインが変わっても構造はほぼ変わらないので、一度作れば流用が可能なパーツでもあります。こちらもBootstrapを基本の型として学習しておくのがオススメです。

フォーム

お問い合わせフォームはほとんどのWebサイトで必要となりますが、入力項目次第でレイアウトが複雑になったり、デザイン次第で装飾用コードが必要になったりと、どのように書くのが良いのか迷いますよね。Bootstrapのコードはレスポンシブ対応で且つシンプルな構成となっているので、このコードを基本にアレンジしていくと良いでしょう。

2-2. Bulma

Bulmaはグリッドシステムを搭載したJavaScript無しのシンプルなフレームワークです（BootstrapはjQueryが組み込み済み）Bootstrapと比べるとモダンなデザインで丸みがあり可愛らしいです。
ドキュメントページは英語ですがパーツごとにカテゴライズされて読みやすくなっています。

Bulmaのドキュメントページはこちら。
https://bulma.io/documentation/

2-3. Foundation

Foundationはあらゆるデバイスで美しいWebサイトが簡単に設計できるCSSフレームワークです。

Foundationのドキュメントページはこちら。
https://get.foundation/sites/docs/

2-4. Semantic UI

Semantic UIはデザイン性が高く、簡潔なHTMLと直感的なclass名で特徴のCSSフレームワークです。

Semantic UIのドキュメントページはこちら。
https://semantic-ui.com/introduction/getting-started.html

3. おわりに

今回はコーディング学習に使えるCSSフレームワークを紹介しました。
各パーツの基本の組み方さえ理解してしまえば、コーディングのスピードは大きく上げることができます。Bootstrapだけでも一通り学習できると思いますが、これが正解！というものはありませんので、色々なCSSフレームワークに触れて自分にあった設計思想を取り込んでいきましょう。

フォーム要素のラジオボタンやチェックボックスの色を、デフォルトから変更したいと思ったことはありませんか？
デフォルトのデザインを活かしつつ色だけを変更したいというときには、たった一行「accent-color」プロパティを記述することで簡単に実装できます！

今回は「accent-color」を使ってフォーム要素の色を変更する方法をご紹介します。

1. accent-colorとは？

accent-colorは、フォーム要素の色を変更できるcssプロパティで、以下の4つのフォーム要素がサポート対象になっています。

　・チェックボックス
　・ラジオボタン
　・レンジスライダー
　・プログレスバー

ブラウザ対応状況

2022年11月現在「Can I use」によると、ほとんどのブラウザで対応していますが、比較的新しいcssプロパティのため対応していないバージョンもあります。

2. 基本的な使い方

accent-color: 任意のカラー;

使い方はとてもシンプルで、適用したい要素にこの一行を記述するだけです。
以下、4つのフォーム要素をデフォルトと比較しながら色の変化を詳しく見ていきましょう。
※Chrome 107での表示結果を掲載しています

チェックボックス

<!--デフォルト-->
<label for="default">
	デフォルト
	<input type="checkbox" checked>　
</label>
<!--色変更-->
<label for="accented">
	色変更
	<input type="checkbox" class="accented" checked>　
</label>

.accented {
	accent-color: red;
}

ラジオボタン

<!--デフォルト-->
<label for="default">
	デフォルト
	<input type="radio" checked>　
</label>
<!--色変更-->
<label for="accented">
	色変更
	<input type="radio" class="accented" checked>　
</label>

.accented {
	accent-color: green;
}

レンジスライダー

<!--デフォルト-->
<label for="default">
	デフォルト
	<input type="range">　
</label>
<!--色変更-->
<label for="accented">
	色変更
	<input type="range" class="accented">　
</label>

.accented {
	accent-color: pink;
}

プログレスバー

<!--デフォルト-->
<label for="default">
	デフォルト
	<progress max="100" value="50">50%</progress>
</label>
<!--色変更-->
<label for="accented">
	色変更
	<progress max="100" value="50" class="accented">50%</progress>
</label>

.accented {
	accent-color: yellow;
}

おわりに

今回は「accent-color」を使ってフォーム要素の色を変更する方法をご紹介しました。

現在(2022年11月時点)はこの記事でご紹介した4つの要素に限定されますが、今後のアップデートで増えることを期待したいですね。

ネットサーフィンをしているとき、この色素敵！カラーコードを知りたい！と思ったことはありませんか？
そんな時カラーピッカーを使えば、すぐにカラーコードを取得することができます。

専用のアプリやChromeの拡張機能などにもカラーピッカーはありますが、Macには最初からカラーピッカーアプリが入っていたことはご存知でしたか？
今回はMacに標準搭載されているDigital Color Meterをご紹介します。

1. Digital Color Meterの使い方

1-1. Spotlightで「Digital Color Meter」と検索

Command＋スペースキーのショートカットでSpotlightを起動し、そこに「Digital Color Meter」と入力してアプリを開きます。

1-2. カラーコードを読み取る

アプリが起動すると画像のようなウィンドウが表示されます。
カラーコードを取得したいピクセルの上にポインタを移動しCommand＋Shift＋Cを入力すると、クリップボードにカラーコードをコピーすることができます。

2. Digital Color Meterをもっと使いやすくする方法

デフォルトの状態ではカラーコードは10進数で取得されるようになっていますが、上部メニューの「表示」→「値を表示」→「16進」を選択すると、カラーコードを16進数でコピーすることができます。



また、RGBの設定も可能なのでお好みで設定しておきましょう。

おわりに

今回は、Mac純正カラーピッカーDigital Color Meterをご紹介しました。

ずっとMacを使っていたけど、こんなデフォルトアプリがあったなんて知らなかった…という人も多いのではないでしょうか。
とてもシンプルで使いやすいので、Macユーザーの方はぜひ活用していきましょう！