ツールと素材

こちらのページでは、プログラミングやweb制作で使えるツールや素材をまとめています。 いずれも、有料のもの無料のものがあり、無料のものでも利用条件に従う必要がありますので、それぞれのサイトの説明をよく読んで使いましょう。

プログラミングデバイス

画面上のプログラミングだけではなく、モノを動かすプログラミングも楽しいものです。こちらでは、比較的手軽に入手できて初心者でも楽しめるプログラミングデバイスを集めてみました。

テキストエディタ

テキストエディタとは、プログラムやwebサイトなどを作成するためのアプリで単に「エディタ」とも呼ばれます。 ワープロソフトに似ていますがエディタとワープロには以下のような違いがあります。

  • プログラミングやwebサイトのコーディングのための機能が充実している（特定の言葉に色をつけてみやすくするなど）
  • コーディングする際の補助機能が充実しているので、入力ミスを減らせる
  • 書式やレイアウトをつける機能がない（太字にする、色をつける、中央よせするなど）
  • ページ区切りができない
  • 印刷機能のないものもある

このような違いがあるので、印刷用の文書を作る用途には向いていませんが、プログラミングする上ではとても便利です。

プログラミング初心者の方でWindowsユーザーの方の中にはメモ帳を使ってプログラムを書いている方もいらっしゃいますが、必ずエディタを使いましょう。

プログラミング初心者ほど効率が圧倒的に違います。

使用するOSの種類ごとのエディタを以下に紹介します。たくさんありすぎて、どれにした良いかわからないという方には、Visual Studio Codeをおすすめします。

Windowsで使えるエディタ

Macで使えるエディタ

Chromebookで使えるエディタ

Chromebookで使えるエディタはあまり種類が多くありません、Windows/Macで使えるものと相当のものとしては、インターネット接続していることが前提になりますがオンライン版のVisual Studio Codeが良いでしょう。オンライン版はブラウザで動作するものでアプリのインストールは不要です。

iPadで使えるエディタ

iPadはテキストエディタを利用するにはあまり向いていませんが、もしiPadでコーディングをするなら、Chromebookと同じオンライン版のVisual Studio Codeか、Textastic Code Editorというアプリがおすすめです。

Androidタブレットで使えるエディタ

Androidタブレットもテキストエディタを利用するにはあまり向いていませんが、こちらも同じくオンライン版のVisual Studio Codeがおすすめです。

Visual Studio Codeを日本語表示にする

どのPCやタブレットを使うにしても、Visual Studio Codeがおすすめですが、難点はインストール直後が英語版になっているところです。 英語は苦手という方は、以下の記事を参考に日本語化して、日本語表示で使えるようにしましょう。

どうやって Visual Studio Code を日本語化したらいいの？

UIデザインツール

UI（ユーザーインターフェース）とはwebサイトだったりアプリの画面のことを言います、UIをデザインするためのツールとしては、Figmaが有名です。ちょっと初心者にはハードルの高いツールかもしれませんが、ステップアップして本格的なアプリやwebサイトの制作をする時には使えるでしょう。

画像作成・編集

画像作成、編集にはオンラインサービスのCanva が、用途別のテンプレートも多数用意されていますのでおすすめです。

素材集

通常、画像や音楽、映像など作った人（著作者）の許可無しに自分の作品で利用することはできません。
アニメやゲーム、映画などに出てくる有名なキャラクターを自分の作品の中で使う場合、自分が楽しむ範囲であれば許されていますがその作品を公開することはできないのです。

こちらのページで紹介しているサイトでは、画像や音楽、効果音などのデータを自由に使うことを許可しているサイトです。これらのサイトからダウンロードしたデータを使って作った作品を公開することも可能です。

データの利用にあたっては、それぞれのサイトごとに「きまり」がありますので、必ず各サイトの「きまり」を読んで、それらに沿った使い方をしましょう。また、データを使った作品を公開する際は、「このサイトのデータを使っています」という一言を添えるとなお良いでしょう。

イラスト

アイコン

写真

フォント

音楽