さすが年度末です。予算消化に託つけたくだらないシゴトワンサカです。
今回はボクがWEB製作時によく使うツールやなんやれかんやれをピックアップしてみたいと思います。
既出のモノがほとんどですが何かの、誰かの役に立てばと思いながら書いてみます。
Sublime Text3
https://www.sublimetext.com/
エディタは必須ツールですが、これでシゴトのやり方も変わるんじゃないかと思ってます。
使用しているパッケージは
- AutoFileName
- BracketHighlighter
- ColorPicker
- ConvertToUTF8
- Emmet
- IMESupport
- Japanize
- Package Control
- Sass
- SASS Snippets
- SassBeautify
- SCSS
- SFTP
- WordPress
一時はAdobe Bracketsを使っていましたが、なぜか頻繁に落ちるので仕方なくSublime Textにしたんですが、今はSublime Textから離れられません。
インストール方法やお役立ちなサイト
Keid’s LIFE様
[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること
Prepros
GUIコンパイラーです。
https://prepros.io/
このコンパイラーのいいところはPreviewモードが便利!
スタティックなページであれば「Open Preview」で開いておいて編集→上書き保存→確認がスムーズにできます。
上書きしたと同時に更新されるのでブラウザをアクティブにしてF5とかいらないです。
因みにフリーとかって言われてるみたいですが、$29です。
フリーというのはトライアルで使用できることを言ってるのか、その昔フリーだったのか。
しかし、サイトごとに管理もでき$29の価値はあると思います。
肝心のSassコンパイルについてですが、もちろん出来ますよw
Placehold.jp
ダミー画像を用意するサービスです。
https://placehold.jp
撮影が終わらないうちにデザインを作らないといけなくなったときなどお役立ち。
いちいちダミー画像を作らなくていいので助かります。
もちろんサイズ、色、フォーマットも自由自在。
Lorem Ipsum
ダミーテキスト(英文)です。
http://www.lipsum.com/
制作は日本語サイトばかりなんですが、多言語サイト案件のときはお役立ちです。
段落数、単語数、バイト数、リスト数でダミーテキストを生成できます。
すぐ使えるダミーテキスト
ダミーテキスト(和文)です。
http://lipsum.sugutsukaeru.jp/
Lorem Ipsumの日本語版と言ったところでしょうか。
段落ごとの文の数や行頭のスペース、行間など様々な設定をしてダミーテキストを生成できます。
ちなみに生成されるテキストは夏目漱石や宮沢賢治。
まとめ
今回は実際にボクがWEB製作時に使ってる基本的なツールの紹介でした。
他にも写真素材やピクトグラム系や色々ありますが、そこにも辿り着かない叩き台的なデザインコーディングでピックアップしてみました。
誰かの役に立てば幸いです。