#フルスタックへの道 これだけは揃えたい。開発時に便利な7つの厳選ツール

ウェブサイト制作やアプリ開発の際に便利なツールやサービスを紹介します

#フルスタックへの道 初心者にも分かる、ウェブデザインやウェブアプリ制作を始めるために

デザイン制作に役立つツールやサービス

デザインアプリ Affinity Designer

サイトやアプリを制作する時に必ずデザインの検討を行います。 Adobe の Illustrator がデザイン検討における代表アプリの一つですが、Affinity Designer は Illustrator を置き換える今最も人気のアプリです。

Affinity Designer は買い切り、しかもそれほど高くないのが良い。しかもかなりの高機能で使いやすい。

  • ぼかしやアウトライン、影付けなどのエフェクトが簡単にできる。
  • デバイスサイズがプリセットされているので、 iPhone 用 や iPad 用など、素早くデザインを開始できる。
  • アイコンやロゴを Affinity Designer で制作した時に、素早くいろんなサイズで書き出せる。
  • Affinity Photo にシームレスに切り替えられる
  • 要素同士の差分処理などが簡単

Affinity Designer はもともと mac アプリでしたが今では iPad 用、windows 用も提供しています。どのデバイスでもほとんど使えてチームで働く場合もやりとりがしやすくなりました。

Illustrator で作成したファイルも大体開けます。

Affinity – Affinity Designer

画像加工 Affinity Photo

こちらは Adobe の photoshop の代替アプリ。 Affinity Designer の兄弟アプリでこちらも大人気。

Affinity Designer 同様に買い切りで、 mac 用だけでなく iPad や windows にもアプリ展開しています。

  • Affinity Designer とシームレスに切り替えられるので、 Designer 上で追加した画像を Affinity Photoでシームレスに加工できる
  • RAW 画像の現像が可能

Affinity – Affinity Photo

ウェブフォントでサイトの雰囲気をガラッと変える google fonts

デザインにおいてフォントはかなり大事。フォントだけで雰囲気をガラッと変えられます。 google fonts では多くのフォントを無料で公開しており、簡単にウェブサイトに採用することができて便利。

主にローマ字のフォントが多いですが、日本語も少しだけ扱っています。

cssファイル上で フォントのリンクを読み込んで、 font-style で設定するだけなので超簡単。

google fonts を用いた style.css の例

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

p.google_font{ font-family: 'Roboto', sans-serif;
}

google fonts

ウェブフォントをローカルで使えるようにする Sky Font

デザイン検討段階でどのウェブフォントを使いたい時には、ウェブフォントをローカルで使えるようにしましょう。

Sky Fontをインストールすればウェブフォントをローカルにダウンロードして使えるようになります。

基本機能なら無料で使えます。

アプリのダウンロードは下記のリンクから。
Monotype – Sky Fonts

無料素材でサイトを彩るunsplash

Unsplash は無料商用利用も可能な画像を多数揃えています。ブログのアイキャッチ画像で悩んだ時など、 Unsplash にはかなりお世話になってます。

Unsplash

コードエディタ

Atom

コードを記述するのに便利なアプリはたくさんありますが、僕は Github が作ったコードエディタ Atom を使っています。

Atom はロゴがかっこよかったり使っていて気持ちいいのが好き。

html や php・css ・ javascript はもちろん、 sass や typescript を記述する時にもプラグインを入れることで綺麗に表示できます。

アプリのダウンロードは下記のリンクから。
Atom

コードエディタは他にも Sublime Text が有名。

wordpress をローカル環境で実行

Local by FlyWheel

wordpress のテーマを自作するとき、まずはパソコン上 (ローカル環境) でどのような表示になるかテストしてからサーバーにアップロードしたいですよね。

ローカル環境のセットアップをとても簡単にしてくれるのが Local by FlyWheelです。

Local By FlyWheel を起動してちょこっと設定をするだけで、wordpress サイトが自動で作られ、ローカル環境で wordpress を試せるようになります。

基本機能なら無料で使えます。

アプリのダウンロードは下記のリンクから。
Local By FlyWheel

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。