WEB開発に役立つツールについて

今日ウェブ上で動くツールやアプリが普及し、PCにいちいちインストールすることなく利用できるサービスが増えてきましたが、その中にはウェブデザインやコーディング・プログラミングに役立つものがたくさんあり、実務レベルで使われているものも少なくありません。
例えば色の管理や画像の圧縮、コードの生成などツールの種類は多岐にわたり、その用途も様々です。
今回はそれらの中からはしくれが使用しているものをいくつかご紹介いたします。

HTML Living Standard HTML要素チートシート

『HTML Living Standard HTML要素チートシート』は、HTMLの仕様のひとつであるHTML Standardに沿った各要素のチートシートです。
HTML Standardにて策定されたすべてのHTML要素の意味はもちろん、カテゴリや属性、関連する要素やネスト（入れ子）できる要素など、あらゆる情報がテーブル形式でまとめられています。
HTML Standardの原文は英語ですが、このサイトでは日本語訳されたものが情報として用いられているので英語が苦手な方でも理解がしやすいのがメリットの一つだと思います。
特に便利なのがネスト調査機能で、調べたい要素の親・子にチェックを入れるだけでネスト可能な要素がフォーカスされます。
HTML初心者にはもちろん、中級者以上の方でも入れ子にしたい要素を素早く調べるのに役立つかと思います。

HTML Living Standard HTML要素チートシート を見る

Colorbase

『color base』は、「デザインワークに”彩り”」を、がコンセプトの日本発のカラーツールです。
入力した色のプロフィールを確認できたり、よく使う色やお気に入りの色などを集めてマイパレットを作るなど、「色」に関する様々なことができます。
また、色覚シミュレーションや黒（#000）や白（#fff）を少しずつ混ぜた際のスケール、入力した色をベースとした場合のUIカラー（WEBデザイン・アプリなどの配色）の提案などの機能もあり大変重宝しています。
日本人が開発しているため日本語完全対応である点も魅力のひとつだと思います。

Colorbase を見る

Sass color generator

『Sass color generator』はSass（SCSS）を利用してCSSを書いている方のためのツールです。
Sassで使用できるビルトインモジュールのうち、lighten()やdarken()などの色の操作に関する関数の実行結果をシミュレートし、色の見本とカラーコードを生成するツールです。
元となる色のカラーコードを入力し、変化のステップをパーセンテージで指定すればそれぞれの関数をパーセンテージ刻みで実行した結果を表示してくれます。
関数の実行結果を知る用途のほか、グラデーションやカラーバリエーションを作成するのにも便利です。

Sass color generator を見る

Colour Contrast Analyser（！要ダウンロード）

せふぃろとのWEBサイト制作におけるポリシーとして「ウェブアクセシビリティの遵守」というものがあります。
誰もがアクセスしやすく、情報やサービスの利用がスムーズに行えるようなWEBサイトを制作するためにはサイトで使用する色の選択や組み合わせも重要な要素の一つとなります。
それを手助けしてくれるツールのひとつが『カラー・コントラスト・アナライザー』です。
前景色と背景色を指定すると、この2色のコントラスト比がウェブアクセシビリティの国際標準ガイドライン（WCAG 2.1）に適合しているか否かを判定してくれます。
カラーコードやスライダーでの指定だけでなく、スポイトボタンでクリックしたポイントの色を直接抽出できるのも便利です。

なお、このツールはダウンロードする必要がありますが、ポータブル版であればインストールする事なく利用できます。

Colour Contrast Analyser を見る

Squoosh

『Squoosh』は、Google謹製の画像最適化ツールです。
画像の劣化を防ぎつつファイルサイズを軽くすることで、WEBページ上の画像の読み込みスピードを早くできるメリットがあります。
画像の圧縮・最適化ツールに関しては『TinyPNG』が有名どころですが、『Squoosh』の利点は画像の圧縮率をユーザー側で調整できる点にあります。
使い方は画像をエクスプローラーからドラッグ＆ドロップして形式を選択し、品質（圧縮率）やその他オプションを調節するだけです。
また、プレビュー画面中央にあるツマミをドラッグすることで、最適化画像と元画像との画質の比較をすることができます。
画像のファイルサイズが元画像からどの位変化したのかもパーセンテージで一目瞭然。「これでよし！」と思ったらダウンロードボタンをクリックして作業完了です。
ローカル上での作業になるのでサーバーにファイルをアップする必要がなく、セキュアなのもポイントが高いです。
使いやすさやクオリティはさすがGoogleといったところですが、欲を言えば複数の画像を同時に処理できればなーと思います。

Squoosh を見る

Font-familyメーカー

日頃CSSを書いているコーダーさんにとって、WEBサイトおよびページに使うフォントを指定する”font-family”の指定は地味に面倒な作業ではないでしょうか？
それを手軽かつ直観的に解決するツールが『Font-familyメーカー』です。
このサイトを開くとまず目に飛び込んでくるのがWindows・Mac・iOSの主要OSにプリインストールされているフォントのリストです。
これらの中から使いたいフォントをいくつか画面下のパレットにドラッグ＆ドロップし、生成されたプロパティをダブルクリックでコピーするだけです。
フォントはドラッグ＆ドロップで並び替えできますし、右にあるゴミ箱にドロップすればリストから削除することもできます。
それすら面倒くさい方は画面上部に”あのサイトはこのフォントを使っています”という文言とともにTwitterやFacebookなど有名なSNSやニュースサイトの名前の項目があるので、それをクリックするだけですぐにfont-familyを設定することができます。

Font-familyメーカー を見る

DeepL翻訳

『DeppL翻訳』はWEB上で利用できる翻訳ツールとしては『Google翻訳』に次いで有名ですが、個人的にその実力はGoogle翻訳より上だと思っています。
その強みはなんといっても精度の高さと自然な翻訳結果にあり、畳み込みニューラルネットワーク（機械学習に用いられる数理モデル）によって従来より正確で原文のニュアンスを再現した翻訳が実現できているそうです。（参考：wikipedia）

試しにDeepLとGoogleにともちゅんのプロフィールの自己紹介を英訳してもらいましたが、やはりDeepLの方がよりネイティブに近い表現になっているように思えます。（冒頭の「みんな～！ともちゅんやで～！」の時点で違いは一目瞭然ですね）
私はこのツールをエラー文の翻訳に使ったり、ファイル名や記事のパーマリンクの英文名を決めるのに使ったりしています。

DeepL翻訳 を見る

すぐ使えるダミーテキスト -日本語 Lorem ipsum-

WEBデザインに限らず、デザインの制作段階ではまだ本番用のテキストが存在しない場合がよくあります。
そんな時にはダミーテキストを代わりに入力しておくのですが、ダミーテキスト用の文章をいちいち考えるのは非効率なので専用のツールで生成したものを使用することが多いです。
『すぐ使えるダミーテキスト』は、日本語のダミーテキストを著作権の保護期間を過ぎた文学作品あるいはwikipediaの引用ガイドラインから生成してくれるツールです。
A4サイズ1~2枚分のテキストがあればオリジナルのダミーテキストも生成できるそうですが、基本的に何の設定もせずそのままボタンをクリックするだけで生成できるのでまさに「すぐ使える」ツールだと思います。

すぐ使えるダミーテキスト を見る

他にも国内産・海外産問わずいろいろなツールを使ってきましたが、今回は特に使用頻度の高いものをご紹介しました。
WEBアプリの開発環境が発達した昨今においては世界中の開発者たちによって日々新たなツールが誕生していますので、気になる方はぜひ探してみてはいかがでしょうか？

今年はまともに更新ができず悔いの残る一年となってしまいましたが、来年はバトンが渡ったらすぐに投稿できるよう頑張りたいと思います。
それでは皆様、よいお年を！