初心者の私がテーマ制作で重宝した！便利サイト・ツールのまとめ
はてなブログのテーマ制作をするにあたり、様々なサイトを参考にしました。
Web全般
- coliss
- 外国のサイトの記事を翻訳して紹介されているサイト。Webに関することはなんでも。アイコンやフォントを紹介されていたり、便利なコードのまとめなどもあるので、読んでいるだけでワクワクします。いろんなテクニックについても記事に上がっているので、おすすめです。
Webデザイン系
クイックリファレンスサイト
- とほほのWWW入門
- 昔からある（と記憶しています）入門者向けサイト。HTMLやCSSの他、JavaScriptなどのプログラミング言語についても。様々な調べ物をするのにとても大助かりなサイトです。
- MDN Web Docs
- 実践用の記事もあり、手を動かしながら学ぶこともできる。もちろん辞書的な使い方もでき、わからない用語や、「これってどう使うんだっけ？」という現象も解決できる。
便利ツール
- GoogleFonts
- Googleのフォントサービス。テーマ制作に凝ったフォントを使いたい時などに。ただ使用するとちょっとサイトが重くなる印象です。
- SassMeister
- SCSSからCSSにコンパイルした結果を見ることができる。他、htmlも見ることができるので、練習や、挙動確認にも使えます。かなり使用頻度の高いツールです。GitHubとの連携も可能。
圧縮ツール
- PNG to JPG
- pngファイルからjpgに変換できるサイト。はてなブログはpngをアップすると、サイズを落としていてもなぜか大きくなってしまうので、jpgに変換しています。
- Optimizilla
- JPEGやPNGイメージを最小サイズに圧縮するツール。まとめてアップロードもできる。
- compressjpeg
- 画像圧縮ツール。jpg、pngの他、pdf、svg、GIFにも対応しています。
配色参考
- 原色大辞典
- カラーコードが見れるサイト。色を検索することもできる。検索すると、似たようなカラーが一覧で出るので、「ちょっと濃い方がいいな」「ちょっと薄い方がいいな」なんて時にも簡単に探し出すことができます。
- Scheme Color
- いろんな色の配色サンプルが置いてあるサイト。パステル調からビビッド調まで様々。気に入った配色をストックしておくと、テーマ制作が捗ります。
- 画像から色を取得するツール|PECO STEP
- その名の通り、画像ファイルをアップして、カラーコードを調べることができます。テーマ制作時の配色に統一感を出したい時など。
モックアップ
- MockUPhone
- テーマ投稿時のスクリーンショット画像を、スマホやPCの画面に嵌め込んだ画像にするために使用。
Git関連
- サル先生のGit入門
- Gitに関することがポップなイラスト付きでわかりやすく書かれています。入門〜発展、逆引きもできるため重宝するかと思います。
- GitHub
- 言わずと知れたソフトウェア開発のプラットフォーム。はてなブログのテーマもここからインストールできる。
質問サイト系
プログラミングを学ぶなら
- 独学に限界がある！
- 誰かに教わりたい
なんて時はスクールに通うのもありですね。
「デジタルハリウッドSTUDIO by LIG」
は、実際のWeb制作会社が運営しているWebクリエイター養成スクール。
そのため、現役クリエイターが指導する他、スクールでは全員がMacを用いたデュアルディスプレイ環境で学ぶことができる。
スクールでは、学ぶだけでなく、コンサルタントによる手厚い就職支援も保証されているため、他業界からの転職を視野に入れている方にもおすすめ。
もちろん、すでにプログラミングをかじっている方にも、スキルアップにおすすめです。
Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】
