Adobe製品の一覧

Adobe Creative Cloudにはさまざまなアプリケーションが同伴されています。Webサイト制作にメインに用いるのは主にPhotoshop・Illustrator・Dreamweaverの3つですが、その他のソフトの使い方を覚えておくと意外なところで役立つかもしれません。

3大ソフト

Photoshop(Ps)
・主な用途―画像の編集や加工。イラスト・デザインの制作も可能。(ラスター画像)
Illusttator(Ai)
・主な用途―デザイン(イラスト・ロゴ・アイコン作成に特化)。(ベクター画像)
Dreamweaver(Dw)
・主な用途―ホームページ制作に特化したテキストエディタ。HTML・CSS以外のプログラミング言語を扱うことも可能。

Webデザイン

Adobe XD
・主な用途―UX/UIのデザインツール。Webサイトやアプリのデザイン、プロトタイプ作成に用いる。
Muse
・主な用途―Web制作に使用するソフト。コードを書くのではなく、ユーザーインターフェースからホームページを作成することができる。

画像作成

Lightroom
・主な用途―写真補正用のソフト。Photoshopと違い、写真編集に関するプロパティーに特化している。
Fuse
・3Dキャラクターを作成する。Photoshopとも連携できる。
Dimention
・3Dツール。製品画像やパッケージデザインに特化している。

文書作成

Acrobat DC
・主な用途―PDF文書の作成。Office-PDF間の互換性もある。
InDesign
・主な用途―印刷物や書籍の作成。ページの一括編集・索引の作成な。
InCopy
・主な用途―文書の共同作業。編集スケジュールに基づいた文書作成をすることができる。

映像・サウンド

Premire Pro
・主な用途―動画作成。VFX効果を動画追加することも可能。
After Effects
・主な用途―動画に視覚効果をつけるソフト。エフェクト・VFXに特化している。
Animate
・主な用途―Flashアニメーションを作成できるソフト。Ps・Aiのアセットを活用できる。
Character Animator
主な用途―アニメーションをつけるソフト。名前通り、キャラクターのアニメーションに特化している。
Audition
・主な用途―音声編集ソフト。音楽を加工するときや、その他効果音を作成したいときに用いる。
Media Encorder
・主な用途―ビデオファイルのエンコーダー。動画ファイルをYoutube等にアップロードしたい際に便利。
Prelude
・主な用途―メディアファイル管理に用いるソフト。Adobeの映像・サウンド作品を大量に扱う際に役立つ。

WordPressサイトのカテゴリーを並び替えよう

WordPressで作成したカテゴリーの表示順を自由に並び替えるプラグインを紹介します。Category Order and Taxonomy Terms Orderを使えば、管理画面でドラッグ&ドロップするだけでカテゴリーの並び替えが可能になります。

使い方


1、 WordPressの管理画面を開き、メニューのプラグイン>新規追加から「Category Order and Taxonomy Terms Order」で検索。「今すぐインストール」でインストールし、ボタンが「有効化」に変化するのでこれもクリックします。


2、 無事に有効化されると、この投稿のメニューに「Taxonomy Order」という項目が追加されます。この画面のカテゴリーをドラッグ&ドロップし、「更新」ボタンを押せばカテゴリーを任意の順に変更できます。


本体サイトを表示し、カテゴリー順が変更されていれば成功です。

コンピューターシステム・Webサイト制作の基礎について学ぼう

Webクリエイターの求職者支援訓練を始めたばかり、という皆さんの為にコンピューターシステム・Webサイト制作の基礎について学べる便利なサイトをいくつか紹介させていただきます。プロのWebクリエイターを目指して、頑張りましょう。

1.VDT作業のガイドライン

VDT (Visual Display Terminals)作業とは、データの入力、文章・画像などの作成、プログラミング、etcをコンピューターを通じて行う作業全般のことです。作業管理・健康管理に関する問題が小テストで出題されますので東京労働局のガイドライン等から復習しておきましょう。

2.情報処理とデータ表現方式

コンピューターシステムを用いた情報処理についても復習しておきましょう。後々HTMLの記述やカラーコードの理解に役立つので、2進数や16進数、文字コードについて学習しておくと便利です。

3.コンピュータ・ネットワークの基本

コンピュータのハード・ソフトや、ネットワークに関しても簡潔に理解しておきましょう。
PC・ネットワークに関する知識は、jQuaryやPHPの授業で大いに役立ちます。

4.Webサイト制作のプロセス

Webサイト制作の工程はシステム開発の工程と似ています。システム開発のプロセスを参考に、自分の技能・企業の特色に見合ったWebサイト制作の手法を身につけておきましょう。
システム開発の工程には大別してウォーターフォール型・プロトタイプ型・スパイラル型等がありますが、それぞれメリット・デメリットがあるので開発工程や完成の見込みに応じて柔軟に使い分けるようにしましょう。

5.ITリテラシー

最後に、ITリテラシーについて紹介します。
近年、迷惑行為をSNSに投稿する・著作権を侵害する・個人情報を漏洩させてしまうといったITリテラシーの低下が社会問題となっています。インターネット空間上でのリスクを知る為にも、最低限の情報倫理やデジタル情報を正しく活用する能力を身に着けておきましょう。

Webサイト制作に使える素材サイト集

今回はWebサイト制作に使える素材サイトを紹介します。
素材と言えど、全て無料で自由に使えるというわけではありません。利用規約に気を付けて活用してください。

Pixabay


高画質の写真素材をダウンロードできるサイトです。
写真素材のほかにもイラストやベクター画像、短い動画素材等が配布されています。

いらすとや


チラシやプレゼンでお馴染みの「いらすとや」です。
ただ、至る所で濫用されているので個性的なイラスト素材が欲しい時は他をあたりましょう。

原色大辞典


色の名前とカラーコードが一目でわかる便利なサイトです。
配色のアイデアや色のイメージの検索等もできるので、Webサイトの配色を決める際などに参考にしてみましょう。

フリーテクスチャ素材館


PhotoshopやIllustratorで使えるテクスチャ(質感)の素材を多数配布しています。
リアルな質感のロゴ・イラスト等を作成したい時はここを活用すると良いです。

Photoshop VIP


Adobe製品で使える素材全般に加え、デザインに役立つチュートリアルも配信しているサイトです。Adobe製品を極めたい方は是非。

便利なフリーツール一覧

Adobe製品以外にも便利なフリーソフトがたくさんあります。
今回は、Webサイト制作に役だつソフトを数点紹介したいと思います。

xMind


xMindはマインドマップを作製できるソフトです。ブレインストーミングをするときや、Webサイト制作の進捗を管理するのに有効活用しましょう。

GIMP


GIMPはオープンソースで開発されている画像処理ソフトです。高価な有償グラフィックソフトにも引けをとらない多機能性が魅力です。デフォルトでのエフェクトやブラシが豊富に揃っているのも魅力です。
Photoshopの代替ソフトとして活用できます。

Inkscape


Inkscapeはベクター画像を作成・編集できるソフトです。イラスト、アイコン、ロゴ、etcの作成に活用できます。
Illustratorの代替ソフトとして活用できます。

Brackets


Bracketsはオープンソースで開発されているWebアプリ開発向けのコードエディターです。HTMLファイルのリアルタイムプレビューや、EmmetやBeautifyの様な拡張機能が便利です。
Dreamweaverの代替ソフトとして活用できます。

Namery


Namelyはリネームツールです。ファイル名の変更に特化したプログラムので、サイトにアップロードする予定のHTML・CSSファイルや画像ファイルを管理するのに便利です。

連想配列の操作

通常の配列の場合、数字を添字(キー)としますが、連想配列の場合は添字(キー)を文字列にすることができます。

<?php
  $customer = ['1','熊木','新宿区','kumaki','BearTree1'];
  echo '配列の1番目は';
  echo $customer[0];
  echo 'です。<br>';
  echo '配列の3番目は',$customer[2],'です。<br>';
?>
<?php
  $customer = [
    'id'=>'1',
    'name'=>'熊木',
    'address'=>'新宿区',
    'login'=>'kumaki',
    'password'=>'BearTree1'
  ];
  echo '連想配列の添字「id」は';
  echo $customer['id'];
  echo 'です。<br>';
  echo '連想配列の添字「address」は',$customer['address'],'です。<br>';
?>

配列の管理が容易となるように、連想配列が入れ子(ネスト)になる多次元配列もあります。下記では連想配列の添字「id」ごとに情報がまとめられています。

<?php
  $customer= [
    '1' => [
      'name'=>'熊木',
      'address'=>'新宿区',
      'login'=>'kumaki',
      'password'=>'BearTree1'
    ],
    '2' => [
      'name'=>'鳥居',
      'address'=>'神奈川県',
      'login'=>'torii',
      'password'=>'BirdStay2'
    ]
  ];
  echo '連想配列の添字「2」の「name」は';
  echo $customer[2]['name'];
  echo 'です。<br>';
  echo '連想配列の添字「2」の「address」は',$customer[2]['address'],'です。<br>';
?>

配列の追加は添字(キー)を指定し実行することもできます。

<?php
  $customer= [
    '1' => [
      'name'=>'熊木',
      'address'=>'新宿区',
      'login'=>'kumaki',
      'password'=>'BearTree1'
    ],
    '2' => [
      'name'=>'鳥居',
      'address'=>'神奈川県',
      'login'=>'torii',
      'password'=>'BirdStay2'
    ]
  ];

//配列の追加を添字(キー)を指定
 $customer[3] = [
    'name'=>'鷺沼',
    'address'=>'大阪府',
    'login'=>'sginuma',
    'password'=>'EgretPond3'
 ];
  echo '連想配列の添字「3」の「name」は';
  echo $customer[3]['name'];
  echo 'です。<br>';
  echo '連想配列の添字「3」の「address」は',$customer[3]['address'],'です。<br>';
?>

print_r関数で配列を表示することができますので、活用してみましょう。その際は、前後の行にpreタグを記述すると改行が入り見やすくなります。

配列の練習2

配列を更に応用する方法を紹介します。通常の配列の他、多次元配列連想配列について覚えると便利です。

多次元配列とは、一言で言うと配列の中にさらに複数の配列が入っているものになります。
連想配列は値を格納して自動的に添字の番号(0,1,2…)が割り振られるのとは異なり、番号をキーとして名前をつけることができる配列です

配列の練習

PHPで変数に配列を使う方法を紹介します。配列に関しては、カッコ内の用法を参考にしてください。

複数の要素(値)の集合を格納・管理するのに用いられるデータ構造が配列である。数学のベクトルおよび行列に近い概念であり、実際にベクトルおよび行列をプログラム上で表現する場合に配列が使われることが多い。

※ダブルクォーテーション内で変数を使用する際には波括弧{}で区切りを明確にするのが通常です。今回のリンク記事では配列のキー指定があれば区切りが明確なので、波括弧はなくとも表示されます。