Tools

新サイト「うぇぶねこ」の制作に使ったもの

新サイト「うぇぶねこ」の制作に使ったもの

こんにちは、ハンサムクロジです。

いろいろ勉強しつつ、自分が勉強したことをアウトプットするための新しい WordPress サイトとして、この「うぇぶねこ」を作りました。ごめんなさい、IE と Edge は完全に無視してます。

ゼロスタートで仕事の合間にちまちま作っていたため1ヶ月半ほどかかってしまいましたが、個人的にはとても満足するものができて、とりあえず今はとても気分が良いです😇

この記事では、当サイトを制作するにあたって利用したツールなどを紹介します。

Atom

Atomの紹介動画

エディターには “Atom” を利用しました。

Sublime Text や Brackets といった選択肢もあったのですが、がっつりカスタマイズできるエディターはほとんど使ったことがなかったのでアイコンと名前のかわいさで Atom を選択。結果、とても満足しています。

プラグインで機能を増やして独自仕様に組み立てていくのがとても楽しかったです。便利なプラグインがあったらぜひ教えてほしいです。

Atom

MAMP

MAMP
MAMP

最初期から終盤にかけて、ローカル環境での開発には “MAMP” を利用しました。MAMP 以外使ったことが無かったから MAMP という感じで、あまり何も考えずに使っていました。

特に不便していなかったのですが、最近になってより便利なツールを見つけたので現在はそちらに乗り換えています。

MAMP

LOCAL by Flywheel

LOCAL-by-Flywheel
LOCAL by Flywheel

MAMP の代わりに見つけたツールが、Docker ベースの WordPress 用ローカル開発環境を簡単に構築できる “Flywheel” というアプリ。

Docker などの知識が全く無いぼくでも手軽&自由に開発できます。特に良いなと思った機能以下の3つ。

  • SSL 環境を作れる
  • 開発途中のサイトを仮公開できる
  • 複数サイトを簡単に作れる

動作も軽くてストレスが少ないです。

LOCAL by Flywheel

Forklift

ForkLift
ForkLift

FTP アプリは “Forklift” を使いました。ぼくが使ったのは旧バージョンの Forklift2。現在は最新版の Forklift3 がリリースされています。

かなりお世話になったアプリなので、お布施の意味も込めて Forklift3 も購入して使ってみようと思います。Git にも対応しているみたいですし、そこらへんの勉強もかねて……。

他のアプリを使い込んだわけではないので厳密な比較はできませんが、多機能で使いやすい印象です。

ForkLift

Mixhost

Mixhost
Mixhost

サーバーは “Mixhost” を利用しています。いろいろと話題になっていましたし、無料期間もあったため軽い気持ちで使い始めました。

専門的な知識はあまりないので詳しく解説できるレベルではないのですが、特に良いなと思ったポイントは以下の4つ。

  • HTTP/2 通信
  • 設定不要で SSL
  • 高速な LiteSpeed サーバー
  • 初期費用無料、月額480円から

LiteSpeed はキャッシュの設定もしやすかったです。Mixhost の公式サイトではプラグインの利用が勧められていますが、.htaccess の設定でも対応できました。

キャッシュについては、また別で記事にしようかなと思います。

MixHost

IcoMoon

IcoMoon
IcoMoon

サイト制作で使うアイコンは “Icomoon” で管理しています。

他のフリー素材サイトなどからダウンロードしたものをアップして管理するのはもちろん、このサービス単体で様々なアイコンを利用できます。

とても手軽に SVG アイコンを利用できるのですが、アイコンごとにライセンスが異なるので、そこだけ注意しましょう。使用する前に要確認です。

IcoMoon

Material icons

Material icons
Material icons

アイコン素材サイトはたくさんありますが、統一感を出したかったのでGoogleの“Material icons”を多用しました。

かわいいアイコンがそろっていて、どれも無料で使えます。ブログサイトよりもウェブサービスとかアプリの制作で便利に使えそうです。

Material icons

Simple Icons

Simple Icons
Simple Icons

サービスや企業のロゴアイコンの SVG をダウンロードするのに便利なのが “Simple Icons” 。

日本のはてなブックマークをはじめ、世界的にはマイナーなサービスであったり、フリー素材サイトで見つけづらいロゴアイコンを取り揃えてしています。

アイコンだけでなくカラーコードも確認できるのが嬉しいポイントです。

Simple Icons

TinyPNG

TinyPNG
TinyPNG

PNG 画像の圧縮には “TinyPNG” を使いました。少しでもサイトの読み込み時間を短くしたいので、積極的に利用しています。

名前は TinyPNG ですが JPG 画像にも対応しています。後述する JPEGmini で圧縮して、さらに TinyPNG で容量を削って超絶軽量化……なんてことも可能。

サイトスピードに反映されているかどうかはイマイチ実感しづらいところではありますが、凝り性な人なら楽しく使えると思います。

TinyPNG

JPEGmini

JPEGmini
JPEGmini

JPG 画像を圧縮できるアプリ “JPEGmini” も活用しました。

圧縮率も良いらしく、なんといってもドラッグ・アンド・ドロップでササッと軽量化できる手軽さが嬉しいです。

といっても、JPG を使う場面ってけっこう限られますよね。ブログサイトだと記事のサムネイルとか記事中に挿入する画像くらいではないでしょうか。

有料アプリですので、アプリ名でググって納得できた方だけお試しあれ。

JPEGmini

Compressor.io

Compressor.io
Compressor.io

“Compressor.io” は GIF 画像を圧縮できるウェブサービス。

当サイトではプロフィール画像に GIF を使っているので、そちらの圧縮に利用しました。アニメーションさせるとかなり重くなってしまうので、こういったサービスは本当にありがたいです。手軽ですし。

他に軽量化できるサービスが少ないのでかなり活用しています。

Compressor.io

Real Favicon Generator

Real Favicon Generator
Real Favicon Generator

スマートフォンのホーム画面に追加した時のアイコン画像やファビコンなどを一括で生成できるサービスです。

詳しい使い方は割愛しますが、1枚の画像から複数フォーマットに合わせた画像を作成、コーディングまで面倒みてくれます。便利です。

Real Favicon Generator

CodePen

CodePen
Code Pen

“CodePen” は、自分で書いた JavaScript のテストで利用しました。

ちゃんと動いているかその場ですぐに確認できるのは本当に便利。これからはコードを公開するために使っていこうと思います。

CodePen

Sass

Sass
Sass

当サイトの CSS は “Sass(SCSS)” で書きました。

全く学習意欲は無かったのですが、仕事で触れたのをきっかけにその便利さに気づいてしまいました。

HTML と CSS しか触れたことのないデザイナーや、ブログ運営者などのみなさんも勉強してみると面白いと思います。

バリバリのフロントエンドエンジニアな方は PostCSS に移っているのでしょうか……。次のサイトは PostCSS 使ってみます。

Sass

gulp.js

gulp.js
gulp.js

便利なタスクランナー “gulp.js” も活用しました。

SCSS のコンパイル、Autoprefixer でベンダープレフィックスの付与、圧縮。JS の結合&圧縮に使っています。

こちらも Sass とともに覚えたのですが、現在は少し時代遅れになってきているようです。タスクランナーとは異なるものの、WebPack という名前をよく聞きます。

次のサイトは PostCSS と WebPack ……かな……。

gulp.js

FLOCSS

FLOCSS
FLOCSS

“FLOCSS” はツールではありません。CSS を分かりやすく効率的に書くための構成案です。

ぼくは基本的に一人で開発しているので、いつも自分さえ分かればいいやと他人にも分かるようにコーディングしたことがありませんでした。

でも、過去の自分ってほとんど他人なんですよね。ぼくが賢くないのはもちろんそうなのですが、少し前に書いたコードを理解できないことがよくあるのです。

そういった事故をなくすためのルールとして FLOCSS(を自己解釈したものになっちゃってますが)を取り入れました。

FLOCSS は日本語のドキュメントで解説されているのでとても理解しやすいです。

とはいえ活字ばかりで辛くなると思うので、感覚的に捉えたい方は geechs magazine の記事がおすすめ。FLOCSS をメイク、命名規則の MindBEMding(BEM)をゲームに登場するモンスターに例えて、わかりやすく解説しています。

FLOCSS

geechs magazine

Visual Guide to CSS3 Flexbox

Visual Guide to CSS3 Flexbox
Visual Guide to CSS3 Flexbox

CSS3 のレイアウトモジュール “Flexbox” は、主要ブラウザが対応したことによりとても使いやすくなりました。

柔軟なレイアウトを簡単に実装できるのですが、プロパティと効果をしっかり覚えるのには時間がかかります。というか、ちゃんと覚えるのってすごく面倒だし、そもそも暗記する必要なんてないと思っています。

ぼくは “Visual Guide to CSS3 Flexbox” というサイトで確認しながら実装しました。

Visual Guide to CSS3 Flexbox

schema.org

schema.org
schema.org

“schema.org” は、Google などの検索エンジンにサイトの情報を正確に伝えるためのマークアップ規則です。

これを活用すると、ブログサイトの記事を Google の検索結果で目立たせるのに有効なリッチスニペットを表示させることができます。

ぼくはこの “schema.org” がけっこう好きです。映画レビューの記事が検索結果に星評価付きで表示された時は本当にうれしかったなあ……。

公式のドキュメントと日本語訳、Google が提供するテストツールを活用しました。あまり初心者向けではありませんが、間違いなく役に立つはずです。

schema.org

schema.org 日本語訳

Structured Data Testing Tool

PageSpeed Insights

PageSpeed Insights
PageSpeed Insights

サイトスピードの高速化もぼくの趣味のひとつ(?)です。

体感の高速化はもちろん、“PageSpeed Insights” を活用して常に改善点を探しました。

環境にもよるため体感だと曖昧になりがちですが、PageSpeed Insights の点数はそれなりに説得力のある指標だと思うので、常に気にしています。

PageSpeed Insights

GTmetrix

GTmetrix
GTmetrix

PageSpeed Insights とは別のサイトスピードを評価するサービスが "GTmetrix"。こちらも活用している人が多いというのもあって、説得力のある指標となっています。

ぼくが作るサイトはいつも画像サイズで点数を下げられます……。

GTmetrix

Markup Validation Service

Markup Validation Service
Markup Validation Service

HTML5 で正しいコーディングができているかを評価してくれる W3C の “Markup Validation Service” も活用しました。

これと Google の Structured Data Testing Tool を使えば、だいたいちゃんとした HTML になると思います。

Markup Validation Service

便利なサイトやツールを教えてほしい

以上です。必要最低限のところですが、なにか参考になれば幸いです。

もっと細かい、あってもなくても良いようなものもたくさんあったのですが、それらはこのブログでまたいつか触れていきたいと思います。

そして、よかったらみなさんが使っている便利なツールも教えていただけると嬉しいです。コメント欄を設けていないので、当サイトのTwitterアカウントまで連絡いただけたら嬉しいです。

それでは、また!