画面を縦にしてください。

画面を縦にしてください。

HAYATA × FANTASTIC = HAYATASTIC

HAYATASTIC NOTE

ツール

ブログ作成に使ったツール・サービスまとめ

2019/05/122019/08/01

Featured image

どうも、ハヤタコウヘイ(@hayatastic)です。
せっかくなのでブログ作成に使用したツール・サービスをまとめます。ぜひ参考にしてね。

デザイン

スケッチブック

Img tool sketchbook01

まずはスケッチブックでワイヤーフレームを書き出します。
最初からいきなりパソコンに向かうより、まずは手書きでイメージを書き出したほうが捗るというのをどこかで見かけたので、僕はそうしてます。

ちなみにこの段階である程度htmlの構造も書いとくとあとで幸せになれます。
でもワイヤーフレーム作成ツール使ったほうが早いよ!って人は別にそれでいいと思います。

Img tool sketchbook02
↑ちなみにおもっくそざっくりですがこんな感じです。自分がわかればいいんです。

Sketch

Img tool sketch01

あ、ちなみに僕はMac使いです。なぜならMacのほうがカッコいいし、デザイナーぽいから。
というわけで、ざっくりレイアウトを考えたら、次はMac専用UIデザインアプリのSketchを使います。Windows?知らん。
まあ別にここは個人ブログのデザインなのでプロトタイピングツールであるSketchを使う必要はないんですが、まあ、せっかくだからね。

Img tool sketch02
↑またまたメチャメチャざっくりですが、こんな感じです。

僕はある程度ラフデザイン考えたら、あとはコーディングしながらブラッシュアップしていくやり方でweb制作をしています。
「デザイニング・イン・ブラウザ」とう手法らしいです。
デザインとコーディングを同時に行うので、デザイン修正や変更の戻り作業が少なく済むので、とても効率的です。

Sketch

コーディング

Visual Studio Code

Img tool vscode

というわけで、早速コーディングしていきます。
Microsoft社が開発しているオープンソースのテキストエディタのVisual Studio Codeです。通称VScodeと呼ばれています。
似たようなやつでAtomとかBracketsとかあるんですが、VScodeが一番使いやすいと思います。
そのうち記事書きます。

Visual Studio Code

Local by Flywheel

Img tool localbyflywheel

ある程度コーディングできたら、もういきなりWordPress化していきます。
ローカルでPHPの開発環境を構築する方法として有名なものにMAMPとかXAMMPとかありますが、ただ単にWordPressテーマの開発だけならLocal by Flywheelが最強です。
もうマジで笑いが出るくらい簡単にWordPressの開発環境ができあがります。
これもそのうち記事書きます。

Local by Flywheel

ライティング

MarsEdit

Img tool marsedit

さて、めでたくWordPressでブログを公開できたら、いよいよ記事を書きます。
ここで使うのはやっぱりMac専用WordPress投稿アプリMarsEditです。
Mac使いのブロガーは黙ってこれを使えというくらい有名なアプリです。
まあいろいろと痒いところに手が届くんですが、大半の人はショートカットキーでhtmlタグがラクに挿入できる機能とかがありがたいみたいです。

App Storeで見る

TextExpander

Img tool textexpander

でも僕はTextExpanderを使ってるので、MarsEditのスニペット機能は一切使ってません。
TextExpanderならMac上のどこでも一発でスニペットを呼び出せます。使ってない人は損してます。
みなさんもTextExpanderEmmetで爆速コーディング生活を満喫しましょう。

TextExpander

画像作成・加工

Affinity Desiner

Img tool affinitydesigner

僕はAdobeアレルギーなのでフォトショ・イラレは使いません。
代わりに使っているのがこちらのAffinity Designerです。
Adobeの月額と同じくらいの料金の買い切りアプリなのに、このアプリだけでフォトショ・イラレと同等の機能が使えるという最強デザインツールです。
パペットワープがない、人物の自動検知がない、など、Adobe製品にしかない機能もありますが、逆にこちらにしかない機能もあります。
なにより操作性や使い勝手の良さは完全にこっちが上です。

このプロモーションビデオを観て欲しくならない人はいないハズ。
3年ほど前の動画なので、実際にはさらに機能も増えてますし、現在はWindowsにも対応しています。

App Storeで見る

removebg

Img tool removebg

無料で被写体の自動検知をやってくれるwebサービスです。
サイトにアクセスして切り抜きたい写真をドラッグアンドドロップするだけで、一瞬で被写体だけ切り抜いてくれます。
高解像度でダウンロードする場合は有料になりますが、ブログ用の画像程度なら無料で十分。

removebg

TinyPNG

Img tool tinypng

言わずとしれた画像圧縮サービスの最大手。
ムカつくパンダのイラストでおなじみのアレです。
でもPNGと言いながらjpgも圧縮してくれるスグレモノ。
いろんな圧縮ツールを試しましたが、圧縮率・使いやすさともにナンバーワンです。
ちなみにMac・Windowsともにデスクトップ版アプリもあります
そのうち比較記事書きます。

TinyPNG

まとめ

というわけで、以上が僕がブログ作成に使用したツールとサービスです。
それぞれのツールはまた個別記事で詳しく紹介するので、お楽しみに!