KENスクールブログ-パソコンスクール パソコン教室 KENスクール

Web

HTML5.1

HTML5が2014年10月に正式に勧告されてから2年経ちますが、マイナーアップデートバージョンとして「HTML5.1」が2016年11月1日に正式に発表されました。
「HTML5.1」ではHTML5に機能拡張が施され、要素や属性の追加や変更が実施されています。

今回、追加された機能で最も期待されているのが、レスポンシブWebデザインを簡単に実現できる「picture要素」です。

「picture要素」内に「source要素」と「srcset属性」で読み込ませたい画像を指定した上で、必要な数だけネストする事で、端末に応じた画像を表示させる事ができるようになります。

下記の例では、通常時は「img要素」で指定した「small.jpg」を表示しますが、画面サイズが1000px以上の場合は「large.jpg」を表示し、画面サイズが640px以上の場合は「middle.jpg」を表示します。

[例]
   <picture>
     <source media=”(min-width: 1000px)” srcset=”large.jpg”>
     <source media=”(min-width: 640px)” srcset=”middle.jpg”>
     <img src=”small.jpg” alt=”sample image.”>
   </picture>

レスポンシブWebデザインでは、1枚の高解像度画像を画面サイズに応じて伸長表示させていましたが、読み込む画像のファイルサイズが同一の為、スマートフォンでの利用は不向きとされていました。今後は「picture要素」を使用する事で、画面サイズに応じた適切な画像の読み込み指定を行えるようになります。

Retinaディスプレイ用に画像を切り替えるのに最適ですね。

ただしIEには未対応との事なので使用する際にはご注意ください。

「HTML5.1」のその他の変更点について興味のある方はW3Cの公式リリースを参照ください。


カテゴリー: Web

Webデザイナーに向いているのはどんな人? 適性をチェックしよう

【11-7】向いているのはどんな人?Webデザイナーの適性をチェック

 

仕事としてのWebデザインは、自分のサイトを自由に作る時と同じようにはいきません。パソコンが好きという気持ちが必須なのはもちろんですが、それだけではダメ。Webデザイナーという職業に向いているのはどんな人なのでしょう?

Webデザイナーに適した6つの資質

Webデザイナーとは、単にWebサイトをデザインする、というだけではなく、デザインを通じて発信者と利用者の橋渡しをする仕事でもあります。こうした重要な役割を担うWebデザイナーに必要な資質とは何でしょうか?具体例を挙げつつ、その理由とともに紹介します。

1 新しいモノが好き

Web業界の進化はまさに日進月歩。今まで使ってきた技術やテクニックを磨いていくだけでは、優秀なWebデザイナーであり続けることはできません。新しい技術や情報を積極的に収集する、またそれを試していくことを楽しみながらできる人は適していると言えます。

2 細かな作業が苦にならない

“デザイン”というと芸術的なイメージがありますが、Webサイトの作成には緻密さも必須です。画像などのサイズをミリ単位で調節したり、ピクセル単位でデザインのズレを直したりといった細かな作業も多くあり、それを嫌がっていては成り立ちません。

3 人とのコミュニケーションが上手い

仕事としてWebサイトを作成するということは、依頼するお客さまの要望に沿ったサイトに仕上げるということでもあります。お客さまはWebに精通している方ばかりではありませんので、それを踏まえてお客さまの希望をうまく聞き出し、どのようなサイトが作れるか、決められた期間でどういった技術を盛り込めるかなどをすり合わせていくことになります。そうしたやり取りを円滑に行うために、コミュニケーション能力は大切です。

4 タフな精神力

大量のコードを書くなど、一人黙々と作業に没頭する時間も長くなりがちです。そんな孤独な作業にもへこたれない気持ちの強さがあることも大切な資質です。

5 相手を考えたデザインができる

センスの良い、見栄えのするWebサイトであることも大切ですが、Webデザイナーは芸術家ではありません。そのサイトの趣旨やアクセス層に合ったニーズを考慮し、Web全体をデザインすることが仕事です。自分の感性にこだわりすぎ、利用者のことを考えられない人は向いていないと言えるでしょう。

6 責任感があり時間が守れる人

社会人として当たり前のことではありますが、コードにミスがあると思い通りのサイトにはなりえないWebデザインという仕事では、正確さや緻密さがことさら求められます。また決められた公開日に間にあわせる締切りの厳守も必須です。たとえ納期の厳しいプロジェクトであったとしても、定められた作業をミスなく納期までにやり遂げるという責任感が必要です。「たぶん大丈夫…」で済ませがちな人は要注意です。

やる気があれば努力でカバーも!

ここで挙げた資質は、Webデザイナーとして仕事をしていく上で望ましいものであり、絶対にすべてが備わっていなければいけないわけではありません。技術やテクニックはもちろん、上手なコミュニケーションの取り方や細かな作業のコツなど、実際に仕事をしていく上で向上していける項目も多くあります。

必要な資質を理解したうえで、自身の能力向上のために努力する意欲、その仕事をしたいという強い気持ちが何より大切なのは、どのような職業においても同じです。

 

Photo: Some rights reserved by Rich Young, flicker
photo credit: Young in Panama via photopin cc


カテゴリー: Web 就職・転職

HTMLを始めよう! その4

前回は、HTML5の「section要素」についてお話しました。
今回は、「article要素」についてお話しましょう。

article要素はsection要素より、さらに使い方が明確です。

article要素の使い方
サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立っている必要があり、article要素の内容だけ抜き出して違和感がないもの。

まずは、見出しと段落のみで構造を記述してみましょう。

srticle1

 

続いては、HTML5のルールでより明確なマークアップをしましょう。

srticle2

見出しと段落をsection要素で囲みました。
section要素で囲むことで、見出し1に対しての段落までの内容が、文章の「節」の意味となります。

ここに「article要素」を加えます。

srticle3

見出し1と3つのセクションをarticle要素で囲むことで、1つの内容となり、独立した自己完結コンテンツと定義されます。

section要素とarticle要素の違いは難しいですが、記事が自己完結しているかどうかを判断しましょう。

次回は、article要素とarticle要素の組合せ方をご説明します。


カテゴリー: Dreamweaver Web プログラム

HTMLを始めよう! その3

前回は、HTML5の「コンテンツ・モデル」についてお話しました。
今回は、要素についてお話します。

HTML5から新しい要素が加わり、より明確なマークアップが可能となりました。
その中でも「セクショニング・コンテンツ」の使い方が難しいですね。

以前までは、<div>を使用することで、構造のアウトライン化が可能でしたが、HTML5では新しいセクショニング要素(<article>、<section>、<nav>、<aside>)が導入されることで<div>でない明確な構造化を実現します。

<section要素の使い方>

・section要素はh要素と一緒に定義
 section要素は文書のアウトラインを定義する要素なのでsection要素の直下にはh要素を使います。

sectionの使い方その1

 

・入り子として使用可能
 section要素の中にsection要素を入り子として使用可能です。

sectionの使い方その2

 

sectionを入り子で使用する時は、h要素も階層に合わせて使用することが推奨されていますので注意しましょう。

今回は、section要素についてご紹介しましたが、次回はその他の要素をご紹介します。

 

この記事に関連する講座

HTML5をしっかり理解してコーディングのスペシャリストになろう

詳しくはこちら


カテゴリー: Web スマートフォン プログラム

Photoshopでトイカメラ風の写真を作ろう

Adobe photoshopを使ってトイカメラ風のアレンジを行います。
自分の撮影した写真に味わいを加えたいときにオススメです。

【使用した機能】
スマートオブジェクト(過去のブログ参照)
・レイヤーマスク
・カラーバランス

※今回使用する写真はこちら

cat

STEP1(事前準備) 猫の写真をスマートオブジェクトに変更する

[レイヤー上で右クリック→スマートオブジェクトに変換]を行います。
これにより、後々ぼかしをかけたりした際にやり直しが可能です。

1  

STEP2 コントラストを強める

明るさとコントラストの調整をして、くっきりとした色合いを作ります。

2

STEP3 カラーバランスを使い色合いを調整する

トイカメラの色合いを出すために、写真を黄色みがかった色に変更します。
[調整レイヤーー→カラーバランス]を使い、イエローよりに調整を行います。
※青っぽい、赤っぽい写真など、好みに合わせて変更してください。

3

STEP4 四隅を暗くする

トイカメラで撮影した写真の特徴のひとつである、四隅の暗がりを表現します。
新規レイヤーを作成し、ソフト円ブラシを使用して四隅を黒く塗ります。
あくまでやわらかい暗がりを演出するために、不透明度を下げて周りの写真となじませます。

4

STEP5 ぼかしを入れる

ピントが合っていない部分を作ることで、トイカメラの味わいを演出します。
[フィルター→ぼかし(ガウス)]を使用し、全体をぼかします。
その後マスクを使い、猫の部分だけぼかしがかからないように黒く塗ります
(※マスクとは、写真自体や効果を「見せたり隠したりする機能」です。黒く塗ると隠れ、白く塗ると効果が現れます)

5

6

 

完成!

kansei_cat
※[フィルター→ノイズ→ノイズを加える]で、写真にざらつきを加えても味が出ます。

いかがでしたか?自分で撮影した写真を加工すると、違った一面が見えてきます。
色合いなどを工夫しながら、様々な加工を楽しんでください。


カテゴリー: Photoshop Web 写真

簡単ミニチュア風の写真の作り方!

今回はAdobe Photoshopを使って、ミニチュア風の写真加工テクニックを紹介します。
ミニチュア風の写真を撮るには、「チルトシフトレンズ」という専用のレンズを使って写真を撮る必要がありますが、チルトシフトレンズがなくても、下記の手順を追ってミニチュア風写真を作ってみましょう。
何気ない普段の風景写真を誰でも簡単に可愛らしい写真に加工することができます。

blog_シフトチルト01

 

まずはミニチュア風写真を作るためのポイントを3つあげます。

  1. ビルなどの高い所から見下ろしたアングルの街並みの写真を用意しましょう。
  2. 画像の端をぼかす。(手順1)
  3. 彩度とコントラストを高くする。(手順2)

手順1

見せたいものをはっきりさせて、残りの部分がぼけるようにするのがポイントです。
[ フィルター → ぼかしギャラリー → チルトシフト  ]を設定する。
下の画像のように1/3がクッキリするように調整して、画像の端をぼかすようにしましょう。

blog_シフトチルト02

手順2

画像全体の彩度を高く設定してカラフルな風合いに仕上げる。
お好みに合わせて彩度やコントラストを設定しましょう。
ポイントは少し極端に彩度を高くすることで作りものっぽい風合いを引き出すことです。

彩度パネル

彩度の設定は[ イメージ → 色調補正 → 色相彩度 ]で調整を行いましょう。

コントラスト

明るさ・コントラストの設定は[ イメージ → 色調補正 → 明るさ・コントラスト ]で調整を行いましょう。

Before・After

チルトシフト01

完成

ミニチュア画像の加工ができましたね。

完成2

お好みでピンホールカメラのような演出をするのもいいでしょう!

今回は「チルトシフト」機能を使ってのぼかし技術がポイントです。
ぜひ皆さんもチャレンジしてみてください。

この記事に関連する講座

画像の合成加工をするならPhotoshop講座

詳しくはこちら


カテゴリー: Photoshop Web 写真

JavaScriptとJSON

JSONとは

以前にも増してJavaScript界隈で聞くことが多くなったデータの表現形式に「JSON」というものがあります。正式には「JavaScript Object Notation」といいます。名前に含まれている通り、JavaScriptのために作られた表記法です。

XML同様、テキストファイルとして作ることもでき、人間が読み書きしやすいようなデータ形式となっています。また、階層を追って目的のデータを探しに行くXMLより、JavaScriptからのデータアクセスがしやすい構造になっているため、データの解析がXMLよりも速いというメリットがあります。

AjaxとJSON

Ajaxも、現在は利用が当たり前のようになってきているJavaScriptを利用した技術です。「Asynchronous JavaScript + XML」の略称で、JavaScriptからWebサーバーにリクエストを送り、サーバーからXML形式で取得したデータをもとにして、JavaScriptで動的にブラウザのコンテンツを書きかえる技術です。「非同期通信」という仕組みを使っています。このとき取得するデータを、XMLではなくJSONデータにすることも増えています。

JSONの基本書式

このように、1つ1つのデータを管理する項目名(名前)と、具体的なデータ(値)のセットをカンマで区切ってリストアップしていくような構造になっています。

名前と値の1セットを、JSONではまとめて「メンバー」と呼びます。

JSON 表記例1

配列や連想配列、マップに似た構造となっていますね。この例では、5つのメンバーを含んでいることになります。

JSONの型

JSONは、XMLと違い「型」というものが値に対して存在します。「型」というのはデータのタイプ(種類)のことです。

● string型(文字列)
“KEN” や “プログラム” など、文字をダブルクオートで囲んだもの。プログラムではよく「文字列」と言います。
● number型(数値)
100や3.14など、ダブルクオートなどで囲まず、数値をそのまま書いたもの。
● boolean(真偽値)
true、falseの2つ。if文やwhile文では、条件の判定結果として使われますが、JSONでは「はい/いいえ」「ON/OFF」的な要素として使われることが多いです。
● null(ヌル値)
空文字や、0とは違う「値が何もない」という状態を表すもの。
● array(配列値)
複数の値を[ ]でまとめて管理する形式。
例)
JSON 表記例2

このような構造にすることで、簡易的なデータベースのように扱うこともできます。

イメージ

id name tel
1001 さいとう 070-0000-0000
1002 すぎやま 080-0000-0000
1003 よねやま 090-0000-0000

JavaScript以外でもJSONをデータの形式として利用することは増えていますので、是非学習してみてください。

この記事に関連する講座

ライブラリの利用にとどまらない技術をマスター

詳しくはこちら


カテゴリー: JavaScript Web プログラム

Webプログラミングの基礎[PHP 変数編]

8種類の基本型

プログラムは必ずデータを保存するための入れ物=変数が必要となります。
変数には保存するデータの種類によって様々な”型”というものが存在します。
ここではPHPにおける8種類の基本形について見ていきます。

※PHPタグ

  • PHP はファイルを解析して開始タグと終了タグ (<?php と ?>) を探します。 タグが見つかると、PHP は開始タグ~終了タグの範囲内でコードを実行します。
  • 上記により、PHP を他のあらゆる形式のドキュメント中に埋め込むことができます。
  • 開始タグと終了タグで囲まれている 箇所以外のすべての部分は、PHP パーサ(構文解析エンジン)に無視されます。

4種類のスカラー(単純)型

1-1.論理値(boolean)

TRUE  // 真
FALSE // 偽

 

1-2.整数(integer)

<?php

$a = 1234;    // 10進整数
$a = -123;    // 負の数
$a = 0123;    // 8進数 (10進数の83と等価)
$a = 0x1A;    // 16進数 (10進数の26と等価)
$a = 0b11111111; // 2進数 (10進数の255と等価)

?>

 

1-3.浮動小数点(float, double)

<?php

$a = 1.234;
$b = 1.2e3;                       // 1.2×10の3乗
$c = 7E-10;           // 7×1/10の10乗

?>

 

1-4.文字列(string)

$name = “Yamamoto” // 文字列

 

複合型

2-1.配列(Array)

配列の各データには「インデックス」という番号が付きます。
特定のデータが必要な場合はそのインデックスで呼び出します。

$week = array(“日曜”,”月曜”,”火曜”,”水曜”,”木曜”,”金曜”,”土曜”);

echo $week[3];                  // “水曜日”が表示される

 

2-2.想配配列

特定の数のカンマで区切られた “キー=>値”の組を引数とします。

$data = array(“id”=>”ALC001”, “name”=>”プレミアビール”, “price”=>200);
echo $data[“name”];          // “プレミアビール”が表示される

 

3種類の特別な型

3-1.リソース(resource)

リソースは、特別な関数により作成され、使用されます。

 

3-2.ヌル(NULL)

ある変数が値を持たないことを表します。

 

3-3.Callable

関数の引数に渡すことができるcallback型を表します。

 

この記事に関連する講座

Webアプリの開発手法を知る

詳しくはこちら


カテゴリー: Web プログラム

Dreamweaver CC2014のライブビューを活用する

今回はDreamweaver CC2014でライブビューを活用する一例をご紹介したいと思います。

Dreamweaver CC2014では、ライブビューで直接編集ができるようになりました。

Dreamweaverのライブビューでは、webkitと同じプレビューが可能ですので、デザインビューより正確なコーディングが行えます。

 

下の図のように、[挿入パネル]→[ヘッダー]のボタンをライブビューにドラッグします。

pic-20160524_01

こうするだけで、ライブビューへ直接、headerタグの挿入ができます。

 

挿入後、下記の図のようにid名もしくはclass名をつけるためのボタンが出てきます。

pic-20160524_02

「+」のボタンを押し、「#test」と入力します。

pic-20160524_03

すると、図のようにheaderにid名がtestとついた状態でコードを記述してくれます。(Class名であれば「.」をクラス名の前につけます。)

pic-20160524_04

 

このように、DreamweaverCC2014では、ライブビューによる正確なコーディングが行えますので、是非試してみてくださいね。

 

この記事に関連する講座

Webサイト作成の定番ソフトDreamweaverを使いこなす!

詳しくはこちら


カテゴリー: Dreamweaver Web デザイン

jQueryでタブごとに色が変えられるタブメニューをプラグインなしで実装する

jQueryには便利なプラグインがたくさんありますが、ちょっとした機能や、シンプルな機能が欲しいという場合、また、プラグインでは存在していない仕組みを作りたい場合は、jQueryをベースとしたプログラムを自分で書く必要があります。

今回は、タブで文字を切り替えるという仕組みを、プラグインなしのjQueryコーディングのみで作成するソースコードを紹介します。

選択されていないタブの色が全て同じサンプルは、探すと結構あるのですが、せっかくならタブごとに色を変えられるように作ってみましょう。

 

実行イメージ

タブ切り替え

HTMLソース

 

記述の解説

liタグとsectionタグを1セットずつ増やし、liタグ内のaタグのhref属性にカラーコードを設定します。

liタグの幅をCSSで調整すれば、タブの数は自由に変更できます。 見た目は適宜CSSで調整をしてください。

下部 <div id=”tab_disp”></div> はタブの切り替えに合わせて中身の変わる、文字表示領域です。

 

jQueryソース

記述の解説

タブ切り替えに合わせて表示したい文字を管理している範囲を、非表示にします。

liタグの数だけ繰り返し処理を行い、aタグのhref属性に設定されたカラーコードをliタグ本体の背景色に設定します。
また、クリックされた位置がわかるようにaタグにclass属性をつけ、連番になる値を設定し、目印をつけます。

初期状態を「TOP」タブが選択されている設定し、
次にタブクリック時の処理を設定します。
クリックされた箇所を取得して、href属性に設定したカラーコードを文字表示領域の背景色にし、sectionタグの中身を表示する内容として設定します。

 


 

タブを実装するプラグインはたくさんありますが、ちょっとしたカスタマイズを盛り込みたいときなど、出来合いのプラグインを利用するだけだと、プラグイン本体のカスタマイズが必要になったり、逆に手間がかかる場合もあります。

jQueryは、本来のJavaScriptより、HTMLを操作するプログラムを書きやすいような機能が豊富に用意されています。

ですので、単純にプラグインを入れるだけでなく、jQueryそのもののコーディング方法を理解してこそ「jQueryを理解した」と言えるでしょう。

 

今回はHTML・jQuery・CSSの各ソースコードの紹介と概要の説明となりましたが、これを機に「jQueryを使う」から「jQueryを書く」ということを考えてみてはいかがでしょうか。

 

 

この記事に関連する講座

JavaScriptで動きのあるサイトを作る!

詳しくはこちら


カテゴリー: JavaScript Web

Photoshop(フォトショップ)の使い方 ~基本編~

image-editing-101040_640 Photoshopの使い方は難しいと思われがちですが、基本的な動作を覚えるだけでできることがたくさんあります。 基本的な動作を覚えるだけで、写真を切り抜くことが出来たり。画像の明るさを変えたり、色味を調整することができるようになります。 現在、これらのスキルはIT業界だけでなく、雑誌社などのマスコミ関係や意外なところだと写真館などにも必要とされています。 基本的な動作を覚えるだけで、仕事や趣味にPhotoshopを生かすことができます。

Photoshop(フォトショップ)とは

PhotoshopとはAdobe社が開発した画像編集加工用のソフトです。 利用にあたってはPhotoshopのラインセンス契約をAdobe社と交わさなければいけません。これはインターネット上で済ませることができますが、学割や法人契約、年間契約などのプランを選ぶことができます。 現在は1ヶ月間限定の無料体験版もあるので、初めて使われる方は無料体験版になれてから購入することもできます。 このソフトは主に写真の編集や、加工に特化しているため印刷業界のあらゆる場面で使用されています。 ひとくちに画像の編集や加工といってもさまざまな機能があり。 同じような機能を持ったスマートフォンのアプリがありますが、そういったモノよりも専門的なことができるソフトなのです。

Photoshop(フォトショップ)でできること

Adobe社が開発した画像を編集、加工するソフトPhotoshopは合成写真を作ったり、雑誌の表紙を飾るような写真をよりキレイに加工するのに使われます。 このPhotoshopはさまざまな画像の加工ができるため、デザインを仕事にする人だけでなく。ウェブサイトに画像を掲載したり、ポスターを作ったりするときなどに使用され。このソフトを使ってできることは、とても幅広いです。 たとえば、撮った写真にポラロイド写真のような白いふちをつけたり。写真の色身を調整することで、写真の印象を変えたりすることができます。 また、写真に写った人物を加工する方法もあり顔にモザイクをかけたり。シワやほうれい線を消したりすることもできます。 それにポスターなどに使えるように写真に文字を入れたり。そのテキスト文章をいろいろと加工することもできるのです。

まとめ

Photoshopを使いこなすことが出来ればいろいろな場面で活躍することができます。 たとえば、家族で写真を撮ったときなどに、より鮮やかに加工することができますし。大切な記念の写真などのときに気になる部分を修正することができるようにもなります。 もちろん、仕事の際にもPhotoshopが使えるととても楽になるでしょう。操作を覚えてさえしまえば、プレゼンテーション用の資料を作るのも楽に、より分かりやすく作ることもできます。 趣味に仕事に使える場面が多いので、覚えておいて損はありませんよ!

この記事に関連する講座

Photoshopを使えるようになってみませんか?

詳しくはこちら


カテゴリー: Photoshop Web デザイン

HTMLを始めよう! その2

前回は、「Webサイトを作りたい!」方へのコーディング(HTML、CSS、JavaScript)の概要のお話をしました。 今回は、その中でも、「HTML」のお話をしたいと思います。 まずは簡単に「HTMLの歴史」を見てみましょう。 HTMLは1989年スイス・ジュネーブで開発は始まりました。(HTML1.0) 1995年にHTML2.0、1997年にHTML3.2、1997年にHTML4.01、2000年にXHTML1.0、2008年HTML5と続きます。 1994年にはウェブをみんなで考え、使う人や場所や環境に差異がないようそういう仕様や技術書を作成したり勧告する「W3C」が設立されました。 始まりをみてもそんなに昔ではありません。 HTMLとは、「Hyper Text Markup Language」。 ハイパーテキストのための文書に目印をつける方法を定めた文法上の約束という意味です。 「タグ(要素)」を使い、文書構造を組み立てます。 HTML5での要素は「コンテンツ・モデル」に分類し定義します。

HTMLタグ

フロー・コンテンツ

一般コンテンツ、子孫にテキストなどを持つもの a、address、article、aside、audio、canvas、footer、form、h1〜h6、header、pなど

ヘッディング・コンテンツ(見出しコンテンツ)見出しとなるもの

h1〜h6、hgroup

セクショニング・コンテンツ

セクションコンテンツ、見出しと概要をつけられるもの article、aside、nav、section

フレージング・コンテンツ

文書内コンテンツ、段落などの中に含まれる文節・語句など p、img、small、span、em、audio、videoなど

エンベディッド・コンテンツ

組み込みコンテンツ、文書に田のリソースを組み込むもの audio、canvas、embed、img、videoなど

インタラクティブ・コンテンツ

対話型コンテンツ、ユーザーによる操作に対応するもの a、button、label、select、textareaなど

メタデータ・コンテンツ

文書情報コンテンツ、文書情報や他の文書との関係を定義するもの link、meta、script、style、titleなど HTML5では、各要素が分類されることで、どの要素の中にどの要素を配置できるかが決まります。 コーディングの際には、基本的な要素のルールとカテゴリーを意識する必要があります。 次回は、要素の使い方をご紹介します。


カテゴリー: Web

超簡単!お肌のレタッチ術

042

肌のレタッチ方法はさまざまな手法があります。
シワやシミ・そばかすなどを1つ1つ丁寧に処理する方法もありますが、
今回は一度に簡単にキレイにし仕上げる方法を解説します。
ぜひ参考にしてください。

●手順1

step1
まずはレタッチしたい素材の背景レイヤーを複製します。

●手順2

step2
このままでは全て滑らかになってしまうので、目・鼻・口など
滑らかにしない箇所にマスクをかけます。

「背景コピー」レイヤーにレイヤーマスクをかけ、チャンネルパネルに切り替え
「背景コピーマスク」チャンネルを確認しながら、滑らかにしたくない個所を
黒いブラシで塗りましょう。

ポイントは、目・鼻・口などの際をブラシで塗る際、ブラシの直径を小さく、
硬さを0%にして丁寧に輪郭を塗るとキレイで自然な仕上がりになります。

●手順3

step3
更に「背景コピー」レイヤーを複製します。

●手順4

step4
上の「背景コピー2」レイヤーを非表示にし、「背景コピー」レイヤーにぼかしをかけます。
「フィルター→ぼかし→ぼかし(ガウス)」を選択し、シワなどが分からなくなる程度まで
半径を調整します。
今回は半径を3.0pixcelに設定してあります。

●手順5

step5
手順4で非表示にした「背景コピー2」レイヤーを再度表示します。
「背景コピー2」レイヤーにハイパスフィルターをかけます。
「フィルター→その他→ハイパス」を選択し、全体をシャープにします。
(分かりにくいかも知れませんが、顔に泥パックをしているようなイメージでしょうか?)
今回は手順4同様に半径を3.0pixcelに設定してあります。

●手順6

step6
「背景コピー2」レイヤーの描画モードを「リニアライト」にします。

●手順7

step7
このままでは逆にシワなどが目立ってしまいますので、「背景コピー2」レイヤーの
不透明度を落として肌がなめらかになるように調整します。
今回は20%まで落としました。

●手順8

step8
これで肌のレタッチは完成です。滑らかなツルツルお肌にレタッチできましたよね。

素材によりけりですが、今回は空やペットボトルの透明感を出すために
「レベル補正」でシャドウとハイライトを少し調整しました。

●手順9

step9
更に光源がペットボトルに当たって反射している雰囲気を出すために、
逆光で光を追加して完成です。

●Before・After

before

after
いかがでしょうか?
一度で簡単にキレイにレタッチできましたよね?

今回の「ハイパスフィルター」を使った肌のレタッチ方法は良く使われる方法です。
「いかにマスクを丁寧に作るか」がポイントになります。
ぜひみなさんもチャレンジしてみてください。


カテゴリー: Photoshop Web デザイン 写真

HTMLを始めよう! その1

【おすすめ講座】基本が身につく! HTML/CSS

computer-1185637_640

「Webサイトを作りたい!」と思った時にみなさんは、まずWebサイトのデザインを思い浮かべると思います。日ごろ見ているWebサイトが「見やすい!」「かっこいい!」などの印象が強いからです。

Webサイトを作る時には、コーディング(内容記述)とデザイン(画像)の両方が必要となります。

今回は、コーディングのお話をしたいと思います。

Webサイトのコーディングは「HTML」というマークアップ言語を使用します。
マークアップ言語とは、プログラミング言語とは違い、「タグ(要素)」を使い、、「ここからここまでが○○です」「ここからここまでが○○です」といった印(意味)をつける言語です。
だから「マークアップ言語」と言います。

プログラミング言語と言えば「何かに対して処理をする」「計算をする」等の言語になりますが、HTMLのようなマークアップ言語では、「表示させる」ための言語です。

html

HTMLと一緒に使用するのが「CSS」です。
スタイルシートの規格の1つで、HTMLで記述したページのスタイル(見た目・レイアウト)を記述します。

HTMLがWebページ内の文書構造を定義するのに対して、CSSはそれらをどのように装飾するか指定します。

css

また最近のWebサイトで欠かせないのが「JavaScript」です。
JavaScriptは、インタープリタ型のプログラミング言語です。HTMLとCSSだけでは、静的な表示になってしまいますが、JavaSciptを使用すると、動的な情報を表示できます。

javascript

主にJavaScriptのライブラリのひとつである「jQuery」が使用されます。
ライブラリとは、「便利な命令の集まり」です。複雑なJavaScriptを記述して実現していたアニメーション機能などを、よりシンプルに少ない記述で実現してくれます。

このように、Webサイトを作る際には、「HTML」「CSS」「JavaScript(jQuery)」が必要となります。

デザインの設計・作業をする際はPhotoshopやIllsutratorなどのグラフィックソフトを使用しますが、HTML、CSS、JavaScriptなどのコーディング作業もWeb制作においてとても重要です。これからWeb制作スキルの学習を検討している方は、こちらも調べてみてください。


カテゴリー: Web デザイン

Illustratorで色鉛筆風のロゴを作ろう

colour-pencils-450621_640
Adobe Illustratorで色鉛筆のような質感のロゴを作ります。
ポスター、名刺などで文字を使う際、ちょっとアレンジを加えたい方におすすめです。

STEP1 好きな文字を書く

まずはロゴにしたい文字を用意します。フォントや大きさは作品に応じて変更してください。

logo_1

STEP2 落書き風のアレンジを加える

このままだと普通の文字なので、ペンで落書きをしたようなアレンジを加えます。
「効果→スタイライズ→落書き」のメニューを使用します。

logo_2

線の太さや質感の加減は各メニューを使って変更してください。プレビューを見ながら行うと便利です。
好みの線が作れたら、「パス→アピアランスを分割」を選択します。

logo_3

logo_4

STEP3 鉛筆風のブラシを作る

ここから鉛筆風のブラシを作成します。

まず、小さな円を1つ作ります。作った円をブラシパネルにドラッグし、散布ブラシとして保存します。
(ブラシパネルが出ていない場合は、「ウィンドウ→ブラシ」を選択し、パネルを表示してください)

logo_5

STEP4 文字にブラシを適用させる

先ほど作った文字に、ブラシを適用させます。この時に散布ブラシオプションを表示させ
サイズ、感覚、散布、回転をともにランダムにします。その後は数字を動かし、好きな質感になるまで
調整します。
(迷う場合は写真の数値を参考にしてください)

logo_6

あとは色を付ければ完成です。

logo_7

完成!

ken_logo
いかがでしたか?今回は文字でしたが、自分で描いたイラストなども同じ手順でアレンジができます。
作品に合わせて是非試してください。


カテゴリー: Illustrator Web デザイン

Dreamweaverでコードをきれいに書き直す方法

student-849825_640

みなさんこんにちは。
今回はDreamweaverでコードをきれいに書き直す方法をご紹介いたします。
まずは、下の図を見てください。

図1

このように、コードを書いていると必要のないところに改行やインデントを入れてしまうことってありませんか?
そのような時にDreamweaverで役立つ機能が「ソースフォーマットの適用」です。
この機能は、乱雑なコードも見やすいようにきれいに書き直してくれます。
では、実際にこの機能を使ってみましょう。
下の図の、赤い矢印が指し示しているボタンをクリックし、
「ソースフォーマットの適用」をクリックします。

図2

適用した結果は以下になります。

図3

無駄な改行やインデントが消え、きれいにコードが並んでいるのが分かります。
このような機能を使えば、見やすいコードを誰でも簡単に書くことができます。
コードを書く上で、とても便利な機能なので、是非使ってみてくださいね。


カテゴリー: Dreamweaver Web デザイン

使える!簡単でお洒落なjQueryのスクロール

autumn-194834_640
iphoneを起動させてから左にスライドし、パスコードを入力する画面に切り替わる際、
背景が徐々にボケるのご存知でしょうか?

Webサイトでも、ページをスクロールする際に前の画像がボケて切り替わると
お洒落だと思いませんか?

実はjQueryを利用する事で、Webページにこのような機能を簡単に実装できるのです。

(サンプル表示)

準備も簡単です。
『通常表示させたい画像』と『ぼかした画像』の2種類を用意するだけです。

では、手順に沿って実装してみましょう。

(1)jQuery公式サイトより、jQuery本体をダウンロードします。
 http://jquery.com/download/
01

(2)Crossfade.jsをダウンロードして解凍します。
 https://github.com/mikefowler/crossfade.js
02

(3)(1)と(2)でダウンロードしたjsファイルをscript要素で読み込みます。
 (今回のサンプルはHTMLと同じ階層に配置しています)

 <script src="jquery-1.11.3.min.js"></script>
 <script src="crossfade.jquery.js"></script>

必要なjQueryの読み込みは以上です。
次は使い方を見ていきましょう。

(4)ぼかしを適用させたい要素をセレクターで指定し、crossfade()メソッドを呼び出します。
 下記は「.cf」というクラスで指定しています。

 <script>
 	$(function(){
 		$('.cf').crossfade();
 	});
 </script>

(5)画像に効果を適用させたい箇所をdiv要素で囲み、クラス「.cf」を追加します。

 <div class="cf"></div>

(6)『通常表示させたい画像』の画像のパスを「data-crossfade-start」に、
 『ぼかした画像』の画像のパスを「data-crossfade-end」にそれぞれ指定します。

 <div class="crossfade" data-crossfade-start="通常表示させたい画像のパス" data-crossfade-end="ぼかした画像のパス"></div>

(7)CSSは、画像を表示する要素にpositionプロパティのrelativeを指定します。

 .div要素に指定するクラス名 {
    position: relative;
 }

以上です。
これだけでスクロールすると徐々にボケる効果が実装できてしまうのです。
簡単ですよね!

基本的な動作以外にも色々なオプションが用意されておりますので、
試してみてくださいね。

また、MITライセンスですので、著作権表示は削除しないようにしましょうね。


カテゴリー: JavaScript Web プログラム

イラストレーターで和なデザイン

Illustratorを使い和風なデザインをご紹介します。

wa_complete

枯山水のような、水墨画に出てくるようなデザインです。

STEP1

直線のためのアートブラシ作成
適当な長さで直線を1本描きます。(サンプル:太さ1pt)

wa_1

STEP2

[オブジェクト]-[変形]-[移動]を選択します。

位置 水平方向「1mm」
移動距離   「1mm」

[コピー]ボタンを押します。

wa_2

「Ctrl」+「D」キーで数回繰り返します。(サンプル8回)

線を交互に選択し、塗りに「白」を設定します。

wa_2_a

STEP3

アートブラシに登録します。

描いた線をすべて選択し、[ブラシ]パネルにドラッグします。
新規ブラシの種類を「アートブラシ」を選択し「OK」ボタンを押します。

wa_3

[アートブラシオプション]の設定は規定のまま「OK」ボタンを押します。

STEP4

円を描くためのアートブラシ作成
「塗り」があるアートブラシで円を描くと塗りで円が見えなくなるため、
円をアウトライン化しアートブラシに登録します。

線の束をコピーします。
すべて選択し、[オブジェクト]-[パス]-[パスのアウトライン]を選択します。

wa_3_a

「STEP2」同様にアートブラシに登録します。

直線や楕円を描き、アートブラシを適用します。
直線・・・直線のためのアートブラシを適用
円・・・・円のためのアートブラシを適用

wa_4

STEP5

楕円の組み合わせパーツを作成します。

半円

[ダイレクト選択ツール]で右側のアンカーポイントを選択し、「Delete」キーを押します。

wa_5

円1/4

[ダイレクト選択ツール]で半円同様に右側のアンカーポイントを削除します。
半円の状態から、下のアンカーポイントを選択し削除します。

wa_6

円3/4

[アンカーポイントの追加ツール]でパス上にアンカーポイントを追加します。
[ダイレクト選択ツール]でアンカーポイントを削除します。

wa_7

STEP6

作成した組み合わせパーツと直線を組み合わせます。

wa_8

パズルのようにいろいろ組み合わせてデザインしましょう。

今回使用した機能は、
・直線を描く
・移動
・繰り返しのショートカットキー
・アートブラシの登録
・アンカーポイントの操作

基本的な操作の組み合わせでたくさんのデザインを作成するできます。
ぜひ、Illustraotrを学んでみましょう。


カテゴリー: Illustrator Web デザイン

地図の描き方(Illustrator編)3

前回に引き続き地図を仕上げます。

map01

作成の流れは以下の通りです。

[自由変形ツール]で変形→[ドロップシャドウ]を設定→立体物の作成→[不透明マスク]を設定→文字・ロゴを配置

▼[下絵]レイヤー以外を全て表示し、地図部分を全て選択して[コピー]し、[ファイル]メニュ→[新規]を開きます。
・名前:KENstudio_map、新規ドキュメントプロファイル:プリント サイズ:A4 方向:横
▼[レイヤー]パネルメニューの[コピー元のレイヤーにペースト]をチェックして作成したファイルに地図部分を[ペースト]します。ファイルを「Links」フォルダーに保存し、同時に平面地図を作成したファイルも閉じます。
▼[コピー元のレイヤーにペースト]のチェックを外します。(特殊な処理ですので、必ず元に戻してください)

線の指定がされているパスをすべてアウトライン(塗りのみ)にします。

map12
map13

▼すべてのパスを選択し[オブジェクト]メニュー→[アピアランスを分割]し、さらにすべてのパスを選択し[オブジェクト]メニュー→[パス]→[パスのアウトライン]にします。

すべてのパスがアウトライン化されましたので、遠近感を出す変形をします。

▼すべてのパスを選択し[ 自由変形ツール]で右下のバウンディングポイントを[Ctrl]+[Shift]+[Alt]+ドラックし、下辺が上辺より二倍弱の長さ程度(右記参照)まで伸ばします。
([Ctrl]+[Shift]+[Alt]はマウスを押した後に押してください)

map14

つづけて、それぞれの設定をします。

▼「道」レイヤー以外をすべて隠し、すべての道路のパスを選択し[パスファインダ]→[合体]して、指示に沿って設定します。
・[透明]パネル:不透明度「50%」
・[効果]メニュー→[スタイライズ]→[ドロップシャドウ]:描画モード「乗算」、不透明度「30%」、Y軸オフセット「1mm」、ぼかし「1mm」
 ※表示バケや操作スピードアップのため、[効果]メニュー→[ドキュメントのスタイライズ効果設定]で解像度を「72ppi」に設定

map15

▼「道」レイヤーを隠し、「地下」レイヤーを表示、「地下」レイヤーを「道」レイヤーの下へ移動し順序を変えます。
▼地下鉄駅部分を選択し[ドロップシャドウ]の設定をします。
・ドロップシャドウ:描画モード「乗算」、不透明度「40%」、Y軸オフセット「0.5mm」、ぼかし「0.5mm」

map16

▼すべてのレイヤーを表示し、「地上」レイヤー以外をすべてロックします。
▼JR駅、小田急、京王とKENスタジオの四つのパスを選択し、立体図作成のため[コピー]します。
▼選択されたパスには[ドロップシャドウ]を設定します。
・ドロップシャドウ:描画モード「乗算」、不透明度「50%」、Y軸オフセット「1mm」、ぼかし「1mm」

map17

▼[コピー]したパスをアートボードの外などに[ペースト]します。JR駅、小田急、京王を選択し少し上に[Alt]+ドラックで移動複製します。
▼京王の側面のパスを作成します。京王以外のパスを[Ctrl]+[ 3 ]で隠します。
▼下記の①赤丸部分のパスを[Shift]を押しながら[ ダイレクト選択ツール]で囲むように選択して[コピー]し、別の場所に[ペースト]します。
▼ポイントではなくパスをそれぞれ選択したので、直線1本ずつがバラけていますので、②緑丸部分のアンカーポイントを選択し[Ctrl]+[J]で[連結]します。③塗りができますので、緑丸部分を選択するために塗り部分をクリックします。塗りをクリックするとパスが選択されるので、その状態で[連結]します。つづけて④の緑丸のアンカーポイントを で選択し[連結]、⑤を選択するために塗りをクリックして選択し[連結]します。側面のパスができましたらコピー元とぴったり合せます。(塗りは上K20%、横K40%、下K60%、)

map18
map19

▼隠したパスを[Ctrl]+[Alt]+[C]で[すべて表示]し、同じ手順でJR駅、小田急の側面を作成します。KENスタジオ部分は高い建物にするため、下記を参照して移動複製してください。パース的なバランスで移動複製したパスの上下を1/3程度短くすると良いでしょう。
▼立体部分が完成しましたら、[グループ]化し地図の上に乗せます。

map20map21

地図の形が完成しました。遠くの部分を薄く消すためにIllustratorで不透明マスクを設定します。

▼すべてのレイヤーのロックを外し、「地上」レイヤーを選択し、地図がギリギリの長方形を作成し、[線]は「なし」、[塗り]は「白→黒グラデーション」で下記のようにグラデーションを設定します。

map22
map23

▼長方形を含めたすべてのパスを選択し、[透明]パネルメニュー→[マスク作成]ボタンをクリックします。

map24

▼「地上」レイヤーの上に「文字」レイヤーを作成し、文字を配置します。下記の文字をバランスよく配置します。
・JR新宿駅 東口 西口 南口 小田急 京王
・インテリアデザイン/建築設計/ブランディング
・KENスタジオ
・東京都渋谷区代々木2-9-2 久保ビル 4F
▼ロゴは「Iinks」フォルダーの「ken_studio_rogo_white.ai」より[コピー][ペースト]します。

これで地図の完成です。ちょっと時間かかりますが是非挑戦してみてください。

map01


カテゴリー: Illustrator Web デザイン

Photoshopブラシの利用

paintbrush-464206_640

みなさんはPhotoshopブラシについてどのくらい知っているでしょうか?
Photoshopに初期設定として入っているブラシだけではなく、
ネット上を探してみれば、沢山のブラシが配布されています。
今回は配布されているブラシを読み込んで実際に使う過程をご紹介します。

1. Googleなどで、「Photoshop ブラシ フリー」などで検索し、気に入ったものをダウンロードします。

2. Photoshopのブラシの拡張子は「.abr」です。今回は仮に「test.abr」とします。

3. Photoshopを起動し、新規でファイルを作ります。

4. ツールパネルからブラシツールを選びます。

5. 図1で、赤丸で囲まれている中の▼をクリックします。

図1

6. 図2で、赤丸で囲まれているアイコンをクリックします

図2

7. プルダウンメニューに中から「ブラシファイルの読み込み」をクリックし、
ダウンロードしたブラシファイルを読み込みます。(今回はtest.abrです)

図3

8. ブラシファイルを読み込みと、スクロールした一番下に新しく追加したブラシが表示されるので、
気に入ったものを選び、カンバスにブラシを使って何か描画しましょう。

図4

いかがでしたか?
このように簡単にブラシファイルを読み込むことができます。
沢山ブラシがあれば、それだけ表現の幅も広がるので、是非とも利用してください。


カテゴリー: Photoshop Web デザイン

カラフルな鋲の作り方

完成例

このような素材は、制作する上で様々な場面で活躍します。
Webページのメイン画像に配置しても、バナーの一部としても活用できます。

では、このような「鋲」の素材はどのように作るのでしょうか?
Adobeのグラフィックソフト【Illustrator】の[3D]という機能を使うと、簡単に作成できます。

 

①まず中央の指標となるようにガイドを用意します。

step01

②ガイドに始点と終点がくるように、ペンツールを使用して下記のようなパスを描きます。

 ※ペンツールの描画方法は割愛させていただきます。
 (色は任意で設定してください。針の色はシルバー系が望ましいです)
step02

③3D効果を適用します。

 [効果]メニュー→[3D]→[回転体]を選択。
step03

④[3D回転体オプション]ダイアログパネルが表示されますので、作業しやすいようにプレビューにチェックを入れます。

step04

⑤[位置]を好きな確度に動かします。

 (今回は、X軸-140度、Y軸-35度、Z軸135度に設定)
step05

⑥針の位置を調整します。

 ⑤の手順で確度が変わるため、ここの手順で調整します。
step06

⑦お好みで影を付けて完成です。

step07

 
いかがでしょうか?
思っていたよりも簡単にリアリティ溢れるカラフルな「鋲」が作れたのではないでしょうか?

今回の制作には、KENスクールのIllustrator講座で学習する「ペンツール」と「3D」の機能を使いました。

難しそうな素材でも、機能を上手に活用すれば時間短縮・作業効率に繋がります。
是非、様々な素材作りにチャレンジしてみてください!


カテゴリー: Illustrator Web デザイン

Illustratorで桜の花を描こう。

japan-699741_640

今回はAdobe Illsutratorを使用して桜の花を描いてみます。
日本人にとって桜は特別な花です。桜が嫌いという方はきっといないでしょう。
Illustratorを覚えたらぜひ描けるようになっておきたいイラストのひとつです。

webblog09

任意のサイズの新規ドキュメントを作ります。
楕円形選択ツールと多角形ツールを使用し、図のような楕円と三角形を描画します。
多角形ツールは初期設定で六角形が書かれるので、ドラッグして描画中にキーボードの下矢印キーを3回押すと3角形が描けます。また、Shiftキーを押しながら描くことで真上を向いた三角形が描けます。

webblog01

アンカーポイントの切り替えツール(アンカーポイントツール)を使用し、楕円の上と下のアンカーポイントを1回ずつクリックして切替し鋭角に変更します。

webblog02

三角形を選択し「オブジェクト」メニュー→「変形」→「回転」を選択し、180度回転させます。
次に楕円の上に一部重なるように移動します。左右対称になるように、整列パネルを使用して横方向は中心を揃えておきます。

webblog03

2つの図形を選択し、パスファインダーパネルの前面オブジェクトで型抜きボタンで楕円を削ります。
※三角形の方が後ろにある場合は背面オブジェクトで型抜きボタンで削ります。

webblog04

ツールパネルで「線をなし」、「塗りをグラデーション」に変更し、グラデーションパネルで任意のピンク色を開始色、終了色に設定します。またグラデーションの種類は「円形」に設定します。

webblog05

グラデーションツールを使用して、グラデーションの中心位置を花びらの少し下に移動します。
また、任意でグラデーションの範囲を広げ調整します。

webblog06

楕円ツールでShiftキーを押しながら、正円を描画します。色は任意の黄色に設定します。
図を参考に花びらの下に配置します。水平方向は整列パネルを使用し中心を揃えておきます。

webblog07

花びらの図形を選択した状態で回転ツールを使用します。Altキーを押しながら黄色い円の中心をクリックし、回転の軸を黄色の丸の中心にします。回転軸が移動すると同時に「回転ダイアログボックス」が表示されるので、角度を「72」に設定します。コピーボタンを押して回転コピーします。
※黄色い円の中心を正確にクリックする場合は、「表示」メニュー→「スマートガイド」をオンにすると、マウスポインタを重ねたときに「中心」と表示され、正確に操作する補助をしてくれます。

webblog08

Ctrlキーを押しながらDキー(繰り返し)を3回押して、合計5枚の花びらができるように繰り返します。

webblog09

これで一輪の桜の花が完成です。
ブラシパネルに登録して散布ブラシに使用したり、ポスターやハガキをデザインする際にもいろいろ便利ではないでしょうか?花びらの形やコピーする枚数などを変えていろいろな花を描いてみてください。


カテゴリー: Illustrator Web デザイン

webデザインおすすめフリー素材サイト5選

05e4597f97c9f455e567e9422c3d5a21_s

webサイト制作をするのは単に文字を入力するだけでも可能ですし、シンプルイズベストという方もいるかもしれません。
しかし、綺麗な画像や装飾を施してユーザーの目を引くようなデザインにすることは実は重要な要素となる場合があります。
例えば、商売をする方にとっては魅力あるデザインは商品やサービス内容を認知してもらえる可能性が高まりますので必要不可欠でしょう。
そこでwebデザインをするためにおすすめのフリー素材を提供しているサイトを5つ厳選してご紹介します。

webデザインには素材が必要!

webデザインをする場合はどのような画像素材を使用するのかが重要な部分ですが、ほかにもサイトのレイアウト決めや文字の段落決め、全体的な色合いなどを考慮する必要があります。それぞれの工程はデザインをする上で重要なもので、その出来栄え次第でユーザーの満足度や滞在時間が大きく左右されることになります。
そんなwebデザインをする上で、全てを手作業で自分で生み出すのは膨大な時間と労力を必要とします。そのため、出来る限りインターネット上で提供される素材を活用することで手間を省くことが可能になるのです。
特に画像についてはネット上に様々な素材を集めたサイトがありますので、そこからダウンロードをして利用するのが圧倒的に効率が良くなりますし、仕上がりも綺麗になることが多いです。

webデザインをする時におすすめのフリー素材サイト

webデザインをする場合に活用したいおすすめのフリー素材は以下の5つで見つかります。

■PAKUTASO(http://www.pakutaso.com/ )

高解像度で高品質な素材を無料で提供しています。人物画像を使用したい場合に非常に役立ち、きっとお探しの素材が見つかります。ユーザー登録をする必要もなく手早くダウンロードできます。

■街画ガイド(http://komekami.sakura.ne.jp/)

東京近郊や近畿地方の街の写真が多く掲載されています。東京都内の画像が多いですが、高層ビルや観光地、公園、リバーサイドなどとイメージカテゴリ別に探せるのが魅力です。

■GATAG(http://free-images.gatag.net/)

自然風景が多くあるほか、人物や動植物をお探しならコチラがおすすめです。幻想的な自然風景は見るものを惹きつけ、サイトのイメージアップに繋がります。

■写真素材 足成(http://www.ashinari.com/)

全国にいるアマチュアカメラマン撮影の写真から好みの素材を選べます。ジャンルは豊富ですが風景や景色が欲しい方に適しています。掲載枚数が圧倒的で、なんと75,000枚もあります。

■tadapic(http://www.tadapic.com/)

30もの無料画像、フリー素材サイトを集めていますので手軽に画像検索できます。検索窓に欲しい画像を入力するとたくさんの画像が検索結果に表示されます。画像探しの手間を一気に省くことができます。

まとめ

いかがでしたでしょうか。
このような画像を使用することでwebサイトのデザインがよりいっそう綺麗に見栄えが良くなる期待があります。
しかし、画像をそのまませずに加工をしてオリジナリティを演出したい、そもそものwebサイトのデザインを自分で作ってみたいという方もいるでしょう。そんな方にオススメなのがKENスクールです。レイアウト設計から色彩設定、画像の加工テクニックを担当キャリアカウンセラーの徹底したサポートを受けて学べますのでスキルアップはもちろん、就転職に有利になるかもしれませんね。


カテゴリー: Web デザイン 写真

webディレクターを目指す人必見!初心者向けガイド

startup-593341_640

webディレクターは、クライアントと制作スタッフとの間に位置し、クライアントの求める内容をきちんと理解した上で、予算と納期に合わせてスタッフの人選やスケジュールの調整などを行う立場にあります。
そのため、webサイトを分業で作り上げていく上では欠かすことのできない重要な存在と言えます。
そこで、幅広い知識とマネージメント能力が要求されるwebディレクターを目指す人にとって、必要となる知識やスキル、資格などについて、初心者向けにわかりやすくまとめてみました。

webディレクターの仕事内容

webディレクターの仕事内容は、ディレクターという名前が示すとおり、webサイトを作る際に現場を監督し、全体の作業内容や進行状況を確認しながら指示を出すというものです。
webディレクターが置かれる現場では、webサイトの制作はwebデザイナーやコーダー、webプログラマーなどそれぞれの担当スタッフの分業により進められます。
そのような現場では、複数のクライアントから受けたプロジェクトを同時進行で作業していくことが多いため、それぞれのクライアントの要望に沿うように品質を管理し、納期を確認しながら統括する役割をする人が必要になるのです。
クライアントの要望に叶うwebサイトを限られた期間で作り上げるための責任者ですから、作業担当者の人選や、スケジュールの設計管理、作成するサイトの品質管理、スタッフのマネージメントも全て任されることになるのが一般的です。

webディレクターに必要な知識・スキル

webディレクターに必要な知識・スキルを挙げるなら、web制作全般に関わる幅広い知識を身につけていることかもしれません。
クライアントに満足してもらえる質の高いWebサイトを制作するためには、何よりもスタッフの人選が大事になります。
その人選し、指揮・監督していくのがwebディレクターの仕事なのですから、それぞれの専任スタッフがどのような作業をどのレベルで行えるのかを把握できなければ仕事にならないからです。
また、作業が始まってからは、デザインやプログラミング、コーディングなどを行う専任のスタッフとコミュニケーションを取る機会が増えます。
そのためにも、専門的な知識やスキルを極めるところまでは行かなくても、きちんと話の内容を理解できる程度のものは身につけておいた方がよいのです。

とっておきたい資格

webディレクターは幅広い知識が要求されますから、制作スタッフと細かいやりとりをするためには、webデザインやコーディング、プログラムなどに関する資格も持っていると役に立つでしょう。
しかし、それらについては、現場スタッフと意思の疎通ができる程度の知識があれば、後は統率力とコミュニケーション能力でカバーすることも可能です。
最低限必要な知識やスキルを持っていることを証明するためならば「webディレクター試験」を取っておくとよいでしょう。
また、クライアントの要望に沿ったwebサイトを制作するためには、「JWSDA Webアナリスト検定」や「Yahoo!プロモーション広告プロフェッショナル認定」「Google AdWords認定資格」などマーケティング系の知識やスキルが問われるものを取得しておくのもよいかもしれません。


カテゴリー: Web 就職・転職

Web業界で働くなら覚えておきたい業界用語

office-594132_640

Web業界やIT業界で働いてみたいと勉強を始めてはみたものの、専門書やハウツーものの書籍で知識を高める際に、業界独特の難しい専門用語を数多く目にして、思わず心が折れてしまった経験がある方も多いのではないでしょうか。
でも、専門用語が分かれば、もう少しハードルも低く感じるようになり、よりスムーズに学ぶことが出来るかもしれません。今回は、Web業界で働くなら覚えておきたい業界用語を簡単にまとめてみました。

まずはじめに

Web業界の業界用語や専門用語に触れた際、その文字を見ただけでは意味が分からないものが多いと感じている方も多いのではないでしょうか。
略語を使って表しているケースが多くあるのです。
そのため、まずは基本的な用語を理解して知識として持っている必要があります。
そうすることで、仮に知らない業界用語や専門用語が登場した場合にも、ある程度の予測から、概ね指している内容をイメージできるようになります。
まずは、基礎的な業界用語をしっかりと知識として持つように勉強していきましょう。

以下にご紹介する用語は、Web業界の専門用語としては基礎中の基礎、はじめの一歩になります。
これらの言葉を理解するだけで、全くイメージできなかった内容が、少し具体的に内容を把握できるようになると思います。

Web業界用語

1)SEO,SEM

SEOはSearch Engine Optimization、SEMはSearch Engine Marketing の略です。
SEOは、検索エンジンで特定のキーワードを検索した際に、webページがより上位表示されるように工夫することを意味します。
つまり、より上位に表示されるwebページがよりアクセス数を取れ、それが実績につながります。
なので、SEO対策はweb業界ではとても重要な対策と言えます。SEMはさらに、検索エンジンを利用して、傾向を調査し、メルマガを送るなどして検索エンジン経由のアクセスを増やし売り上げアップをめざすマーケティング手法のことを指します。
Web業界用語で最も重要とされているかもしれません。

2)UI、UX

UIはUser Interface、UXはUser Experienceの略です。
UIはユーザーがコンピューターと通じて情報のやり取りを行う際に直接操作するレイアウトやデザインを指し、スマホで例えればホームやアプリの画面を意味します。
これをよりスムーズに調整することでユーザーの使いやすさが大きく変化します。
UXはさらに、ユーザーにとって使いやすい製品は何かをマーケティングし、開発時点から検証を繰り返し作り上げ、ユーザーが心地よく利用できるかを考慮するものです。

3)クラウドソーシング

クラウドソーシングは、企業がインターネットなどを媒体に、不特定多数の人々(crowd/群集)に業務をアウトソーシングする(sourcing/委託)ことを意味する造語です。
クラウドソーシングは、プログラミングやライティング、デザイン等の様々な分野で活用され始めています。また、写真素材提供サイトや課題解決コミュニティサイトなど、WEB上の様々なサービスがすでに成立しています。知的労働力(コンテンツや知恵)を相対的に安い価格で調達する方法として注目されています。

まとめ

今回ご紹介した用語は、Web業界用語の基礎中の基礎となります。これら以外にも、Web業界にはまだまだたくさんの業界用語があります。
実務に業務にかかわる際には、社内用語も含め、聞いた事のないような言葉ばかりが飛び交う未知の世界に感じるかもしれません。
新しい業界用語に出会うたびに、臆せずコツコツと覚えていくことが何より大切です。
Web業界に飛び込む前に、まずはご自身の下地作りに注力し、チャレンジ精神でどんどん知識を吸収していきましょう。


カテゴリー: Web 就職・転職

Photoshop(フォトショップ)初心者が抑えておきたい基本写真加工ツール5選

photographer-407068_640

仕事で写真を撮ったり、画像を編集したりしている人はもちろん、日頃から写真を撮るのが趣味という人にも、Photoshopの写真加工ツールは便利です。少しでも使えるようになっておくと、「ちょっと残念なミス写真」が「味のあるよい写真」に変わるかもしれません。
どのような写真でも、明るさや色調を補正してやると、見た目が大きく変わりますし、補正の仕方次第では、カメラの腕前が少し上がったように見えるかもしれません。
そこで、Photoshopの写真加工ツールのうち、初心者にも使いやすい基本のツールを5つだけ厳選してご紹介することにしました。

Photoshop(フォトショップ)の基本写真加工ツール

「写真を加工したいと思うのはどんなときか」と考えた場合、完全な失敗写真は加工の対象にはならないということに気がつくのではないでしょうか。
やはり、おおむねうまく撮れているのに「どこか物足りない」「何となく見栄えが悪い」というときに、写真を加工したくなるようです。
例えば、せっかくよい表情の写真が撮れたのに、後でパソコンの画面で見たら少し暗かったという場合。それなら、明るさを足してやるだけで十分でしょう。
また、水平に移っていれば申し分なかったのにというレベルであれば、ゆがみを補正してやるだけで満足のいく写真になります。
もしこの程度のことであれば、Photoshopの写真加工ツールの中でも極基本の機能だけで直すことができますから、初心者でもすぐに使い方を覚えられるのではないでしょうか。

抑えておきたい基本写真加工ツール

Photoshopを使うならぜひ抑えておきたい基本の写真加工ツールを、5つだけ挙げるとしたら次のようになります。

まず、1つめは「レベル補正」の機能。明るすぎたり暗すぎたりする写真の明度を補正するときに使います。

2つめは「フィルター」機能。これは、ぼかしたり水彩画のように加工したりするような「特殊効果」と言った方がわかりやすいかもしれません。たくさんの種類があり、いくつものフィルターを重ねてかけることも可能です。

3つめは「色域指定」という機能。これは、写真の中の1か所を選んでクリックしてやると、その部分と同じ色の所をすべて自動で選択してくれるというものルです。例えば、帽子の色を変えたい、髪の色を変えたいなどと言うときに使うと便利です。

4つめは「クイック選択」という機能。画面上をブラシのような物でなぞると、境界線が自動的に認識され、選択範囲が素早く決まります。

5つめは、「ものさしツール」という機能。2点間の距離を測る物と思われがちなため、「使う機会が無い」という人も多いようですが、実は水平を測ってゆがみを補正するのに便利なツールなのです。

まとめ

Photoshopには、基本の写真加工ツールだけでもかなり便利な物がたくさんありますから、それらを自分の好みに応じて選び、気軽に活用できるようになれば、写真撮影自体ももっと楽しくなるかもしれません。
便利なツールは、何度も繰り返し使うことによって、使い方を身につけていくのが最も早く使いこなせるようになる方法なのではないでしょうか。
実際にどう使うのがよいか、身近に実演しながら教えてくれる人がいたら、より早く上手に使えるようになることでしょう。


カテゴリー: Photoshop Web デザイン

Illustrator(イラストレーター)初心者が抑えておきたい基本描画ツール5選

Illustrator初心者が自分のイメージをIllustrator上で作りあげるために、覚えておきたい描画ツールを5つ紹介します。

初心者の方はまず基本となるこれらの描画ツールを覚えることからはじめましょう。

これらの描画ツールはイラストを書いたりするときに必要となるものです。はじめは基礎から覚えておかなければ自分の想像を形にすることは、とても難しくなってしまいます。

描画ツールのそれぞれの機能を把握することで、より効率良く。よりクオリティが高いモノを作成することができるようになるので、ぜひ覚えておきましょう。

Illustrator(イラストレーター)の基本描画ツール

【アートボート】

Illustratorの基本描画ツールの1つは「アートボート」があります。
このアートボートとはIllustratorにおけるキャンパスであり、ページです。

新しく画像を作成したいときに「新規作成」を選ぶのですが、そのときにこのアートボートの設定からはじまります。
どのような大きさの画像にするのか、というキャンパスのサイズを設定することが出来る機能だと理解してください。印刷する紙のサイズに合わせることができるので、A4やA3など自由にサイズ変更することが可能です。

【オブジェクト】

次に基本となる描画ツールは「オブジェクト」です。
オブジェクトとはアートボード上に、線や図形。それから編集したい画像を配置するときに使うツールです。
このオブジェクトを使って描かれたモノがイラストの元になったり。「選択ツール」と組み合わせてオブジェクトで囲んだ範囲を切り取って移動させることもできます。

抑えておきたい基本描画ツール

そして、Illustratorでイラストを描いたりするときに基本として抑えておきたい描画ツールをご紹介します。

【パス】

1つ目は「パス」と呼ばれるツールです。
これはIllustrator上に配置される「オブジェクト」を構成しているものでもあります。ペンツールを使うときにパスと呼ばれる点と点を右クリックしたまま、ドラッグすることによって、好きに線を引くことができるのです。フリーハンドではないキレイな曲線を描いたり、直線を引くときなどに必要不可能なツールです。

【スウォッチ】

次に「スウォッチ」というツールがあります。
これは図形などのオブジェクトオブジェクトに対して、色を塗ったり。好きな模様を指定することができるツールです。
単純なカラーだけでなく、若草模様などの複雑な模様も好きなオブジェクトに指定することができます。

【アピアランス】

最後に「アピアランス」というツールがあります。
配置したオブジェクトにスウォッチを使って色や模様をしていしますが、これを更に複雑に指定することが出来ます。
たとえば、気になる部分だけ色を変えたり、柄を変えたりしたいときや、1本の線の色や太さを指定して変更すしたいときに使えるツールなのです。

まとめ

ご紹介した5つの描画ツールはIllustratorを使用する上で、基礎となるツールです。Illustratorの場合は線を引いたり、色を塗ったりする作業にも1つ1つのツールを使いこなす必要があります。

たくさんあるツールの中でも、特に重要度の高いツールを紹介したので、覚えておいて損はありません。

また紹介した5つのツールだけでも、イラストを描いたり、自分だけの作品を作ることができます。

まずはこれらのツールを使いこなすようになるだけでグッと作業のレベルが上がるので、ぜひ覚えて使えるようにしてください。


カテゴリー: Illustrator Web グラフィック デザイン

Webサイト制作に便利なChrome拡張機能3選

office-625893_640

webサイト制作をする場合に、知識がない場合はインターネットでちょっと調べることもあるもの。そんな時にブラウジングが早いことは重要ですし、さらに便利なツールがあれば時間的な効率化が図れます。
そんな中で早いブラウザとして知られるのがGoogle Chromeですね。
このGoogle Chromeを使用するならChrome拡張機能は是非とも知っておきたいところ。
今回は数あるChrome拡張機能からwebサイト制作をする上で便利な3つの拡張機能をご紹介します。

Chrome拡張機能とは

Chrome拡張機能とはGoogle Chromeに追加ができる拡張機能のことで、必要な機能を追加してChromeの効率化が図れます。この機能はGoogle社が提供しているものでありますが、個人または企業が作成したものがあり、バラエティに富んでいます。それぞれの目的に合った拡張機能を入れて、より快適にスピーディにブラウザを使用することが可能になります。
このChrome拡張機能を使用するにはChrome Webストアから好みのカテゴリを選んで右上にある青色のボタンをクリックするだけです。そうするとダウンロードが始まり、その後自動でインストールされます。
作業が間違いなく快適になりますのでwebサイト制作には欠かせないものと言えます。

webサイト制作に便利な拡張機能

webサイト制作はChromeの拡張機能を便利に活用してサクサク作業を。以下の3つの拡張機能は是非ご活用ください!

Speed Dial 2

Google Chromeといえばシンプルで見やすいスタートページに「よく見かける」が表示されますが、自分で設定できないのが玉にキズ。しかしSpeed Dial 2はこれを解決してくれます。デザイン的に優れているだけでなく、直感的で使いやすいUIになっています。設定を変えて自分本位のスタート画面にできるのは魅力で、サイト制作に関する参考ページのブックマークに役立ちます。

Evernote(Google Chromeアプリ版)

Evernoteといえばメモ保存やウェブクリップとして活用する方も多いでしょう。しかし、起動が重いと感じる方も多いのでは?そこで活用したいのがウェブアプリ版のEvernote。ノートの編集、マージ、同期などの機能がちゃんと使えて便利です。

Pocket

サイトの制作において分からないことは参考とするページを確認する場合に便利な拡張機能です。気になったサイトをワンクリックで保存できます。細保存したページをダウンロードさえしておけば、携帯電話やタブレットでも見ることができますので便利です。

まとめ

いかがでしたでしょうか。
このようなGoogle Chromeの拡張機能を使用するとwebサイト制作の際に参考になるサイトを簡単にブックマークでき、結果的に効率化できます。分からないことがあった時に毎回検索窓に入力をしていた方はスピードアップできる期待があります。
とはいえ、webサイト制作の全てを自分で行うには限界があり、サポートをしてもらうことが大切です。KENスクールではwebサイト制作の「いろは」を学べますので、これからサイト制作を始めたい、将来的にwebコーディングの仕事に携わりたい方にオススメできます。


カテゴリー: Web デザイン パソコン全般

【プログラミング】Javacsript入門におすすめの本3選

programming-593312_640

Javascriptをwebサイトに活用するとサイトを訪れた時間に合わせて自動で挨拶文を表示してくれたり、プルダウンメニューを表示してサイト自体をコンパクトにしたりといったことができます。HTMLサイトでは静的な情報の表示となるのに対し、JSとも呼ばれるJavascriptを使用したサイトでは動的な情報の表示ができるのがメリットですね。
しかし、JSを使うにはプログラミングが必要になり、習得するのはなかなか大変です。そこで、入門者におすすめの本を3つ紹介します。

初心者にもわかりやすいJavascriptの本は!?

Javascript初心者がまず行うべきことはプログラミングの基礎をしっかりと学んで固めることでしょう。コア部分についてきちんと学んでおくと、専門用語が頻発しても理解しやすくなりますし、実際のプログラミングをスムーズに行う上でも役立ちます。コア部分は表現力が豊かな言語であるにも関わらず、シンプルなので入門書などを熟読して理解できるとすんなりとプログラミングができるようになるでしょう。
初心者の方の場合は、まずは入門書から入ることが大切で、読み進めながら実際にキーボードを入力すると理解が深まるのでは?
また、文字だらけでは理解に苦しむ方もいるかもしれませんので、図解入りの本を読むことで素早く理解できるかもしれませんね。

Javascript初心者向けの本3選

Javascriptをマスターしたい初心者におすすめなのが下記の3つの本です。

3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス)

著者:大津 真
価格:2,570円
出版社:技術評論社
最もジャバスクリプト入門にふさわしいとして話題の一冊です。支持されているのは例題が実践活用できるような問題になっていることや、説明が明確になっているからです。まだ知識が無い方が基礎の基礎を学ぶためにはおすすめの一冊です。

JavaScriptの絵本

著者:アンク
価格:1,814円
出版社:翔泳社
初心者にとっては文字だけでは理解が難しいこともあるもの。そこで活用したいのがこの一冊です。図や表が用いられていますので、早く深く理解できる期待があります。基礎から応用までの解説が丁寧にされていますが、だからと言って深い知識を得られないということではありませんのでご安心を。

スタートアップHTML5

著者:笠原 一浩
価格:3,024円
出版社:ソフトバンククリエイティブ
HTMLの5入門書という位置づけですが、HTML5だけでなく、CSSやJavaScriptの解説もされています。JSの知識をある程度身に付けた上でさらに実践的な活用を目指す方に適しており、ステップアップしたい方は必読です。

まとめ

いかがでしたでしょうか。
JavaScriptを学ぶにはこれらの本を活用することが初心者には良いかもしれません。空き時間を有効活用して確実に学んでみましょう。
しかし、時間がない、独学では限界があると考える方もいるでしょう。そんな方におすすめなのがKENスクールです。こちらでは必要なスキルをしっかりと習得できるカリキュラムがあります。初心者もプロにするカリキュラムで話題になっています。
将来的にwebデザイナーとして働くことを考えるのであれば、入学を考えるのが良いかもしれませんね。


カテゴリー: Web プログラム

webデザイナーを目指す人必見!初心者向けガイド

macbook-624707_640

企業が独自のwebサイトを持つことが当然のようになっている昨今、その分webデザイナーを目指す人も増えています。
かつては、webサイトを組み立てられる知識やスキルさえあれば、それだけで重宝がられていた時代もありました。
しかし、今は素人でもwebサイトをどんどん開設しているような時代ですから、「webサイトを組み立てられる」という程度の知識やスキルでは、プロとして仕事をすることはできなくなっています。

そこで、これからwebデザイナーを目指す初心者向けに、どのような知識やスキルを身につけ、どのような資格を取得しておいたらよいかをまとめてみました。

webデザイナーの仕事内容

webデザイナーのメインの仕事内容は、もちろんWebサイトをデザインすることです。
しかし、実際には、HTMLなどを駆使してwebサイトの組み立てを行う「コーディング」や「プログラミング」までを全て1人で行うwebデザイナーもいます。
結局は、会社の規模や経験などによって、どこまでの作業を1人で行うかが異なっており、細かく分業しているところと、1人で全ての作業を行うところがあるのが現状です。
ですから、webサイトをデザインすることができれば、それだけで仕事として成り立つ場合もあります。

とは言え、実際にコーディングやプログラミングまで1人で行うかどうかは別としても、コーディングやプログラミングの知識を身につけておくことは、webサイトをデザインする上で強みになることは間違いないでしょう。
もしコーダーやプログラマーに細かい作業を任せることになっても、デザイン通りの作業を行ってもらえているかが確認できますし、相互のやりとりもスムーズに行えるからです。

webデザイナーに必要な知識・スキル

webデザイナーとして仕事をするつもりであれば、HTMLとCSSは理解しておいた方がよいでしょう。
特に、HTMLは最低限使えるようになっておいた方が無難です。
なぜなら、webサイトに文書を載せようと思ったら、テキストをHTMLタグで囲んでやらなければならないからです。
確かに、Dreamweaver のようにHTMLの知識が無くても自動的にタグをつけてくれるようなソフトはありますが、プロとしてwebサイトを作るのであれば、HTMLの知識は不可欠です。
また、魅力的なwebサイトに仕上げるためには、CSSも必要になってくるでしょう。
CSSだけでwebサイトを作り上げることも珍しくないくらいですから、webデザイナーにはHTMLと同じくらい必要な知識・スキルと言えるかもしれません。
更に、webサイトを作る上では、Photoshopの操作も欠かせないスキルと言えそうです。
webサイト上に画像を載せる場合に、よく使われるソフトですから、ある程度使いこなせるようになっていた方がよいでしょう。

とっておきたい資格

webデザイナーを目指し、何らかのスキルを身につけている人は年々増えてきています。
しかし、初心者が単にweb系の知識やスキルを身につけただけでは、就職につながるわけでも、よい仕事ができるわけでもありません。
これまで実務を積んできた人たちの中に入り仕事をするわけですから、いかに即戦力として働ける力を身につけているかが勝負のカギになるのです。
ですから、webデザイン系では唯一の国家資格である「ウェブデザイン技能検定」は取得しておいた方がよいかもしれません。
1級から3級まであり、学科だけでなく実技の試験もありますから、2級以上取得していると、時間内でwebサイトを仕上げられる力があることを強くアピールできるでしょう。
また「webクリエイター能力認定試験」も基本的なスキルが身についていることをアピールするためにはおすすめの資格です。
実務に沿った形で知識や実技の問題が出題されるため、身につけた知識やスキルがどれだけ実際に使えるものになっているかを確かめるのには向いているでしょう。


カテゴリー: Web デザイン 就職・転職

Illustrator(イラストレーター)の使い方 ~基本編~

チラシ

皆さんがコンビニや、スーパーなど日常で良く見かけるポスターや有名企業のロゴなどはどうやって作られているか知っていますか?
これらを作成するときに使われるのがAdobeが販売している「Illustrator(イラストレーター)」というソフトです。

デザイナーとして働く人にとっては必須なソフトなので、専門知識がなければ使うことが難しいと思われやすいですが、基本の使い方さえ覚えてしまえば誰でも使いこなすことができるようになります。
Illustratorの基本をマスターすることでデザインだけでなく幅広い分野で活躍することができるでしょう。

Illustrator(イラストレーター)とは?

そもそもIllustratorとはどういったソフトなのかと言うと、画像を編集したり、印刷物のデザインをしたりすることができるソフトです。
Windowsに搭載されている「ペイント」をさらに発展させ、より専門性を高めたソフトだと考えると分かりやすいでしょう。

しかし、その性能はペイントと比べ物にならないほど、高性能です。

広告や雑誌などの私たちが当たり前に手にしている、印刷物のほとんどはこのソフトを使って作られたものです。

細かな文字のレイアウトや、人々の目を引きつける魅力あるデザインをIllustratorを使って作り出すことができます。

実はこのソフトが使われる場面は多く、プレゼン資料を作ったり。お客さまに見せるパンフレットなどを作るときにも使われることがあります。
特にデザイン関係の仕事をする場合には“必須“とさえ言われるほど重要なソフトなのです。

Illustrator(イラストレーター)でできること

Illustratorでできることは、とても幅が広い分野に及びます。
デザインを仕事にする人にとってはIllustratorを使わずに仕事をすることは不可能に近いでしょう。それぐらい、私たちの生活の中で必要とされている場面は多いです。

例えば、漫画やアニメのように本格的なイラストを描くこともできますし。私たちが触れる機会が多いスーパーのチラシや、お店のPOP、飲食店のメニューから、雑誌のレイアウトまで印刷物を作るときには無くてはならないソフトです。

またWEBサイトの作成にもその力を発揮します。
私たちがWEBサイトを見ているときに、気にしない立体的なボタンだったり。WEBサイトの顔であるヘッダー部分の画像だったり、WEBサイトの広告などのバナー画像や、GIF画像などの書き出しを行うこともできます。
WEBサイトのデザインをするときにも欠かせないソフトなのです。

 

いかがだったでしょうか?
Illustratorのソフトを使いこなすことが出来るようになれば、仕事の幅が広がることでしょう。お店のPOPを作るときにも役に立ちますし、プレゼンが必要が場合でも、使いこなすことが出来れば、ワンランク上の仕上がりになること間違いなしです。

現在、このIllustratorを使えることができる人の需要が増えてきています。もしも、使いこなすことが出来るようになればIT企業だけでなく。幅広い分野で仕事の幅を広げ、質を上げることができるでしょう。


カテゴリー: Illustrator Web デザイン

これからIT業界を目指す方へ!Webサイトが出来るまで

taking it up a notch

Webサイトの作成に関わるのは、Webクリエイターだけでしょうか。実際には、様々な人が様々な役割を担っています。また、一口にWebクリエイターと言っても、仕事内容によって分業されています。そこで、1つのWebサイトが出来るまでに、どのような人が、どのような流れで仕事をしているのか、簡単にご紹介します。

Webサイトの作成に関わる人と、その役割

企業のコンテンツ作成のケースでご紹介します。

●クライアント

一般企業とします。Webサイト制作会社に、Webサイトの作成を依頼します。

●営業担当

Webサイト制作会社の営業部門に所属し、クライアントの要望を受けて、コンテンツの企画提案を行います。対クライアントの総合窓口です。

●Webディレクター

Webサイト制作会社の制作部門に所属し、コンテンツの具体的な内容を考えます。営業担当と一緒に、クライアントへ企画提案をすることもあります。Webサイト作成現場の責任者です。

●Webデザイナー

Webサイト制作会社の制作部門に所属し、Webサイトのレイアウト、掲載するイラスト・写真、テキストのフォント・色などを考えます。業務委託などを受けるSOHOに所属する場合もあります。

●Webプログラマー

Webサイト制作会社の制作部門に所属し、プログラミングをして、実際にWebサイトを構築します。業務委託などを受けるSOHOに所属する場合もあります。

Webサイト作成の流れ

Webディレクター、Webデザイナー、Webプログラマーを総称してWebクリエイターと呼んでおり、クライアント→営業担当→Webクリエイターの順で、Webサイトの作成に関わります。

プロセス1:打合せ

  • 営業担当がクライアントの要望をヒアリングし、コンテンツの企画提案をします。
  • 営業は、打合せ内容だけではなく、クライアントからブランド戦略、広告戦略、事業展開なども聞き出し、Webディレクターに報告します。
  • Webディレクターが参加することもあります。

プロセス2:コンテンツ決定

  • Webディレクターを中心に、Webデザイナー、Webプログラマーも交えて、コンテンツを考えます。
  • 営業担当を通じて、クライアントへコンテンツ案を提出し、その承認をもらいます。

プロセス3:作成作業

  • Webディレクターが、Webデザイナー、Webプログラマーにサイトの作成を指示します。
  • Webデザイナーは、Webサイトのデザインを考えます。
  • Webプログラマーは、Webサイトのプログラミングをします。

プロセス4:リリース

  • 仮Webサイトで最終の動作確認を行います。
  • 営業担当を通じて、クライアントにも仮Webサイトの最終確認をしてもらい、その承認後、正式に公開されます。

プロセス5:運用

  • 公開したら、それで業務終了ではありません。その後も毎月、営業担当がクライアントへアクセス解析を報告します。
  • アクセス解析を受けて、クライアントからサイトの更新や改善の要望があれば、プロセス1~4と同じ流れで対応します。

Webサイト作成に大切なこと

以上のように、いろんな担当者が関わることでWebサイトは作成され、改善されていきます。サイトの作成には、担当者個人の技術力が重要なのはもちろんですが、個々の意識レベルの高さも仕事の質を左右します。つまり、各プロセスの担当者が、クライアントのブランド戦略、広告戦略、事業展開などの意識を共有できていれば、より早く確実に、クライアントが望むWebサイトが作成できるのです。

個々の能力とチーム力が合わさって、より質の高い仕事が可能となるWebサイト作成。奥が深く、やりがいのある仕事ではないでしょうか。

 

photo credit: Robert S. Donovan via photopin cc


カテゴリー: Web