サイト作りが楽しく簡単になる、オススメの便利なサイトをいくつかご紹介

サイトやブログのデザインなどを1から作ったり、WordPressなどを利用したブログで少しだけデザインなどを変えたい時がありますよね。でも、デザインを直接いじるのは専門的な知識も必要になります。

当記事では、このブログの政策や改善するために、参考にしたりしているサイトを紹介したいと思います。

コンテンツの転載は固くお断りいたします。

主にサイトデザインに役立つ『サルワカ』

普段、サイトのデザインを行う際は CSS を利用しますが、浅い知識だと簡素で基本的なことしかできません。より複雑なデザインや変わったデザインにするためには高度な知識が必要です。

そんな手間を省き、簡単に綺麗な見出しやボタンデザインの参考になるサイトとして『サルワカ』があります。

例えば『CSSで作る!押したくなるボタンデザイン100(Web用)』や『CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選』などがあり、タイトルを見ても分かるようにデザインの種類が豊富です。

自分が思うデザイン、気にいるデザインがきっと見つかるはずです。サイト自体もおしゃれですし、この他にも参考になる沢山の記事があるので、是非ご覧になってみてください。

簡単にレスポンシブ対応でオシャレなサイトを作れる CSSフレームワーク『Materialize』

サイトデザインをしたり、パソコンでもスマホでも1つのファイルで対応可能になるレスポンシブデザインを簡単に作れるようになる CSSフレームワーク『Materialize』というものがあります。

サイトデザインや、ボタンやメニューバーの動作などを全て1から作り上げるのは大変です。しかし、それを簡単に行い、コードの記述量を減らすのに貢献してくれるのが CSSフレームワークです。

色選びの参考になる『和色大辞典』

サイト作りをしていると、リンクの色、テキストの色、見出しの色などなど様々な色について考えなくてはなりません。そんな時にオススメしたいのが『和色大辞典』というサイトです。

『和色大辞典』ではその名の通り、和色が一覧表示されています。パッと見ただけでも、どれも綺麗な色であり和を感じるものばかりです。

同じサイトで別のページに『洋色大辞典』というのもあります。和色に比べるとくっきりと色鮮やかなものが多いように感じます。

色を選ぶときは画像編集ソフトを利用しても良いのですが、こんな風に色が一覧化されているのはイメージが湧きやすく選びやすいのオススメです。

様々なアイコンを簡単に用意できるようになる『Material Icons』

当ブログでもカテゴリー一覧の部分などで使用しているのですが、文字だけではなくアイコンも一緒に表示すると見やすくなりますよね。

しかし、アイコン1つ1つを画像として用意するのは大変ですし、様々なサイズに対応するのも大変ですが、そんな時は『Material Icons(公式ホームページ)』などのアイコンフォントを利用すると便利です。

HTML に1行追加するだけで簡単に豊富な種類のアイコンを利用できるようになります。フォントのサイズや色を CSS で指定するだけで変えられるのも便利な特徴です。

他にもSNSアイコンにも対応した『Font Awesome(公式ホームページ)』もありますので、そちらも見てみてください。

様々なウェブフォントを利用できるようになる『Google Fonts』

フォントにこだわりたい時、様々なデバイスでも同じフォントを表示させたい時に便利な『ウェブフォント』というものがありますが、全てを無料でサーバーに負荷をかけなくて済む『Google Fonts(公式ホームページ)』というサイトがあります。

約850種類ものフォントを一覧で確認することができ、サイトへの導入も HTML と CSS にそれぞれ1行加えるだけで出来ます。

日本語フォントは『Google Fonts + 日本語 早期アクセス』で確認できます。

タイトルや記事の文字数を簡単に確認できるようになる『文字数カウント』

記事のタイトルや内容の文字数って重要ですよね。でも、それを簡単に確認する方法ってあまりありません。そんな時に便利なのが『文字数カウント』というサイトです。

真ん中にある入力スペースにカウントしたい文字列を入力し、『字数を数える』でカウントできます。行数や段落数も分かります。

タイトルが30〜35文字くらいに収まっているか、記事の文字数はどれくらいなのか、チェックすることで SEO対策になりアクセスアップに繋がるかもしれません。

WordPress でなくとも簡単にコメント欄を実装できる『DISQUS』

主に静的サイトで必要になるのですが、静的サイトは動的な表示が出来ませんのでコメント機能を実装するのが難しいんですよね。それでも簡単に用意できるようにしてくれるのが『DISQUS』というサイトです。

自分のサイト等の情報を登録することによって、数行のスクリプトをコピーしてブログの HTML に貼り付けるだけでコメント欄を実装することが出来ます。

Twitter や Google アカウントを利用してコメントの投稿も可能です。高機能ですし簡単に実装できるのでオススメです。

簡単にレスポンシブ画像を用意できる『Responsive Image Breakpoints Generator』

パソコン用の高解像の画像をそのままスマホでも表示させると、サイズも容量も大きいのでページの読み込み時間が増えますし、転送データ量の増えてしまいます。

そんな時は、パソコンなら大きな画像を表示させ、スマホなら小さな画像をと切り替えられるようになる『レスポンシブ画像』というものがあります。

しかし、それを用意するには横幅に合わせた複数の画像を用意しなければならず、やや複雑なコードも書かないといけません。『Responsive Image Breakpoints Generator』を利用すれば、それを簡単に用意可能です。

使い方は簡単で、横幅が何pxから何pxまでのものを容量ごとにいくつ用意するのか指定し、画像をアップロードするだけです。

少し待つとレスポンシブコードと画像が用意されます。コードをコピーして記事に貼り付け、画像をzipファイルでダウンロードしてサーバーにアップロードするだけです。

レスポンシブ画像は SEO対策にも有効ですし、サイトを快適に見られるようになるのでオススメです。

グリニッジ標準時間(GMT)を確認できるサイト

search console に登録するためのサイトマップなどを用意する時や、記事ごとの作成日時を記録しておく時に、必須ではないのですがグリニッジ標準時間を確認できると便利です。

その確認は『グリニッジ標準時間』で出来ます。

横幅が16,32,48px対応のファビコンを作れるサイト

ファビコンってご存知でしょうか。下の画像のように、Chrome だとタブのタイトルの左側に表示されているアイコンのことですね。サイトの象徴とも言えるものです。

アイコン画像のファイル形式は様々ですが『.ico』という拡張子にしておくと便利そうです。しかし、その形式で更に複数のサイズのアイコンを作ろうとなると少し面倒です。

それを簡単に作成してくれるのが『ファビコン favicon.icoを作ろう!』というサイトです。簡単にマルチアイコンに対応したものを作れるのでオススメです。

終わりに

他にも優れたサイトはありますが、その中でも私がオススメしたいのは以上です。皆さんも、素敵なサイトを作ってみてくださいね!