WEBデザイン/クリエイターのお仕事って?WEBデザイン制作ワークフローとは

デザイナー/フォトグラファーの大阪ミナミ街ぶら日記

WEBデザイン/クリエイターのお仕事って?WEBデザイン制作ワークフローとは

概要

WEBデザイン、WEBクリエイターとは、一言でいうと”ホームページを作る”お仕事です。
いわゆる”ホームページ”というのは、1990年代前半頃から流行り始め、当時はホームページとはなんぞや?持っているだけで凄い?
なにをするもの?と謎だらけ。個人で作ったりすることも珍しい物でした。
しかし近年は、ホームページはSNSやブログと言う形態となり、企業やビジネスでのWEBサイトでは広告媒体(ブランディング・プロモーション)や販売(電子商取引)に使うことが標準化されています。
ホームページはいつから切って離せないものになったのでしょうか。
では、WEBデザインの仕事内容、その制作フローをホームページ初期の雑談から紹介していきたいと思います。

インターネットの登場から急発展


Creative commons 「著作権表示」

スマートフォンも2010年を過ぎたあたりから急速に普及し、今や当たり前の存在になったWEBサイト(ホームページ)ですが、1990年代前半から見ていくと、それぞれ変革があったことがうかがえます。

筆者の知ってる範囲でのインターネット以前

・パソコン通信
電話のダイヤル回線を使った通信。主にチャットや通信ゲームに利用された。

・MS-DOS
Windowsが登場する前のOS(オペレーションソフト)。現在主流のGUI(絵になったアイコンを押して操作)ではなく、キーボードを使ってコマンド入力を行い実行させるシステム。
この時代は、フォルダ内のファイルを見るだけでもドライブをキーボード入力で指定し、ディレクトリ(フォルダ)名を指定し、結果を閲覧すると言うプロセスでした。このコマンド入力の書き方も決まっていて、MS-DOSの解説書も本屋さんでよく目にしました。

・ソフトは全て手動インストールだった
現在はUSBポートにデバイスを指すだけで自動認識しますが、当時はこの自動認識が無く、手動でそのデバイスを使うためのソフトをインストールしていました。
その際はもちろんMS-DOSでのコマンド入力。パソコンは初心者にはかなり扱いづらいものでした。

・当時のホームページ
まさしく黒背景と緑の線の世界。後期は白の文字や線が登場し、ドットの荒い絵と組み合わせた黒い無機質な世界でした。

筆者の知ってる範囲でのインターネットサービス開始後

・ターミナルアダプター
ISDN(のちにADSL)と言うサービスが始まり、今まではパソコンの中で秘かに鳴る「ピポパピポパ」と言うダイヤルアップが無くなり、ターミナルアダプターを経由した通信が使えるようになりました。
また利用料金も上限なし(ちょっとやりすぎるとすぐに20万円とかの請求が来ていました)~定額固定になり、この時期から爆発的にインターネットが身近な存在として普及し始めました。

・Windowsとマウス
キーボード入力でパソコン操作をしていたのが、マウスが登場し、カーソルを絵の上に置くだけで操作ができるGUIが一気にパソコンの親近感を高めていきました。
お年寄りでもコンピューターを使える。そういう時代の到来でした。(Windowsの2作目、Windows95で一気に使いやすくなってTVCMでもパソコンのCMを頻繁に見るようになりました。また、NECのバザールでござーるも丁度この時代です)

・自動認識
WindowsMe/2000以降、USBポートに刺すだけでデバイスを自動認識し、使えるようになり、さらに親近感が高まりました。

・ホームページと言う呼称が業者間ではWEBサイトと言う言い方に変わり、ネットショッピングも普及
Windows98の頃にはインターネット上にはもうたくさんのWEBサイトが登場し、あらゆるサービスが開始されていました。
今まではカタログを見て電話注文していた通信販売も、インターネット上での電子商取引によって画面だけで注文を行え、ネットショッピングの普及が始まったと言えます。
筆者もホームページを作ったり、HTMLを少し触ってみたりするのはこのあたりから始めました。

・iPhoneの登場
iPhoneを特に有名にしたのは3GSだと筆者は思い込んでいます。
当時の携帯電話は薄型折り畳み式、キーボードスライド式などがありました。
しかし、現在で言うところのスマートフォン/スマートデバイスは当時このiPhoneだけでした。

この後、アンドロイド端末も登場し、アップルからはiPadも登場。
インターネットとWEBサイトは切って離せない時代になりました。

※筆者もMS-DOS時代からのパソコンユーザーの一人です。

目的を決め大まかな枠組みを作る

WEBサイト制作は、まずはどういったことをしたいのか、目的を決めて枠組み、仕様と固めていきます。
筆者の場合は、まずは一度すべての要望を聞き、その中でコストイメージと照らし合わせて一つ一つ精査していきます。
依頼者にコストイメージが無い場合は、全ての要望を仮に実現した場合の最大コストイメージを出します。

動的か静的か

煩わしいコードなどをあまり触ることなく簡単にブラウザから更新やページ追加をしたい場合は動的に
お問い合わせフォームの設置くらいであとは特に触らない、安くしたい場合は静的に
大きくサイトはこの二つのパターンに別れます。
ECサイト(電子商取引販売サイト)を作る場合は、動的サイトになります。

設置場所の決定

WEBサーバーを決めます。
ご自身でサーバー契約をしていてそこに設置したい。と言う場合はFTP情報一式を頂いたのち指定の場所へ設置。(静的サイトの場合はファイルを渡す場合もあります)
サーバーお任せの場合は制作会社であらかじめ用意してある場所へ設置~公開。
新しいところを契約してそこに自分でお金を払っていきたい。と言う場合は、ご契約を頂いたのちFTP情報を一式頂きます。

新規かリニューアルか

元々あったサイトをフルリニューアルするのか、ドメインも無い状態からのスタートかを聞いておく必要があります。
また、リニューアルの際は、運用中のWEBサイトに影響を与えるわけにはいきませんので、開発環境をどうするか、見て確認していただく環境を別に準備する必要があります。
一部リニューアルやコンテンツ追加の際はFTP情報を聞いたうえで目的の制作を行うだけになります。

フォームの設置

フォームが必要な場合は、静的環境上または動的環境上では設置方法や作業工数が異なります。
また、フォームの項目やResult画面の設置など、細かい仕様があればそれだけ工数が増えることになります。
後に自分でフォーム項目を追加したい、変更したいなどの要望があれば、さらに設置方法などは限定されてきます。

規模を知る

要望を聞き、どれほどのコンテンツになりそうか、又はどれほどのコンテンツが増えていきそうかなどを把握し、
最終的にリリース出来そうなスケジュールイメージを出します。
また、画像制作が多くなりそうな場合はそれだけ工数+日数が必要になります。
(筆者は安易に規模をページ数では測らず、コンテンツボリュームから内容に合った見せ方や伝わり方を考え、ページになるのかなどの表現方法を考えます。)

※制作側が作る枠組みに情報を当てはめるやり方はスマートではないと筆者は考えます。
コンテンツがあり、要望があり、目的とターゲットがあって、それに適した見せ方、伝え方の結果がページなのか、画像なのか、動画なのか、別の見せ方なのかを考えます。
テンプレートを用意して当てはめる行為はWEB制作を請け負う側としては非常に粗雑な対応ではないでしょうか。選択結果として費用を考え、そうなる場合はもちろんありますが。

提供素材/情報を確認する

すでにWEBサイトがある場合でも、古い情報や変えたい文字、文章などがあります。
また、aiデータ、写真、映像など、どこまでの情報を頂けるか、制作サイドで作る情報はどれくらいあるかを取り決めておかないといけません。
aiデータでも開いてみて見てみると、画像になってしまってるもの(レイヤー情報やベクター情報の消失)、aiと聞いて頂いて開いてみたらパワーポイントだったなどの場合があります。
こういう場合は、データが用意できなかったという扱いになり、通常は作り直し(制作費プラス)となります。
写真も同じく用意できない場合、または新規で必要な場合は撮影が必要になり、カメラマン費用が追加となります。(映像制作の場合は費用が掛かりすぎる為、別途相談となるでしょう)

デザインイメージを確認する

カラーコンセプトを始め、サンプルサイトが用意されていればそれの確認、
サンプルサイトが無い場合は、どのような形にしたいか、スライドやパララックスなどのインタラクティブコンテンツ実装の有無など
見た目や動きの完成イメージを固めます。

概算見積もりを提出する

ここまで枠組みが決まると概算見積りを出せる段階になります。
制作途中に追加や必要以上の回数の修正などはもちろん追加になりますが、そのあたりも踏まえてある程度のコストイメージを出しておくと安心です。

タスク割

目的と枠組みを決めてきたら今度は作業タスクを考えていく必要があります。
WEBデザインのお仕事は、組織内で行う場合は大抵分担作業となり、各分野に分けられます。

WEBディレクター

・制作内容をまとめた書類一式、一部はパワーポイントを使ってプレゼンテーションを行い、プロジェクトの概要と詳細をチームに伝えます。
・カラーコンセプト、フォント、文書の構造や指示、大まかな完成イメージサンプルなどの資料をチーム内で共有します。
・情報をまとめて設計し、ワイヤーフレームを作成する。
・制作スケジュールをチームで話し合い、具体的な日にちを段階的に決めてまとめます。
・自社内で完結出来ないものは業者探しを行い、費用イメージと照らし合わせて打ち合わせをする。
・スケジュールと費用を照らし合わせて人材を確保する(外部内部、スポットの方などが居ればアポを取る)
・全体的な制作指示書を作成する。
・外部業者に依頼している場合は、外部業者の管理も行う
・クライアントとの基本やり取りの全てを担当する(窓口になる)

※注意点
一部別業者にデータなどを預けている場合は、制作サイドで請求するように依頼者(クライアント)から言われることがありますが、この場合はトラブル防止の観点から出来るだけ依頼者側でやっていただくようにした方がいいでしょう。
下手に制作サイドが請求をし、余計な火種を出す可能性もあり、または立場上本来は依頼者対制作側であることから踏み込むべきではありません。(あくまで依頼者と前制作会社との関係であり、第三者が間に入らない方がいいでしょう)
逆の立場で考えると、今までクライアントから受けてた仕事が突然無くなり、しばらくして別の制作会社からデータ下さいなど連絡が入ればどのような気持ちになるでしょうか。
クライアントから「もう貴社でのお仕事依頼はしません」と間接的に言われている事にもなりますし、どの立場からデータを要求されているのかなど良い気はしないはずです。

WEBデザイナー

・ワイヤーフレームとサンプルイメージを見てデザインカンプを作る。(モックとも言う)
・コーダーへ渡すための細かい指示等があれば内容を細かく書き込む。
・クライアントが先に見たいであろうイメージを先に優先して作る。
・イラスト制作があれば、イラスト制作やグラフィックデザインを担当することもある
・簡単な映像であれば映像制作も行う
・連携するSNSなどがあればアカウント開設などを行う

※注意点
WEBデザインを行う際は、ある程度のHTML/CSSの知識が必要です。
余りにも印刷物寄りのデザインをしてしまうと、コードで実現できなくなります。
また、フレキシブルになるコンテンツもあるので、変化した際のイメージや注意点もコーダーに伝えるべきです。
カルーセルを実装する際は、サンプルイメージとして各切り替わり後のTOPイメージモックも用意していると安心でしょう。
「ここは書かなくても伝わるだろう」、「分かるだろう」、と言うのは危険です。過剰なくらいのデータやイメージを準備してるくらいでちょうどよいと言えるでしょう。
画像ではない、HTMLでのテキスト表示させる箇所も、モリサワや一般的なパソコンには入っていないフォントを使うべきではありません。

HTML/CSSコーダー

・仕様書を見てレスポンシブのブレイクポイントを決める
・デザインカンプのスライスをコードに合わせて行う
・インタラクティブコンテンツがある場合は実装テストを行う(JS jQuery)
・情報設計とデザインカンプを照らし合わせて仕様書を確認しながらHTMLコードを記述していく
・プログラマーに渡す箇所は表示文字数などを決めて指示を書き込んでおく
・CSSコードを書いて形を整えていく
・インタラクティブコンテンツを実装する
・ページャーやループ処理の確認をし、プログラマーへ指示内容を書き込む(ブロックや文字などをコピーで増やしてみて崩れないかの確認または文字数制限など)
・アクセス解析コードを埋め込む

※注意点
基本的に、サーバーサイドスクリプト(Apache環境上で実行されるもの)以外のスクリプト(ブラウザで実行されるインタープリタ、直接言語、実質JSの事)の実装はコーダーが基本行います。
コーダーであってもこのあたりのある程度のオブジェクト指向プログラミングの知識はあった方が安心でしょう。
また当たり前の話ですが、画像は出来るだけ少なく、可能な限りHTMLとCSSでの表現でデザインを再現・作り上げていきましょう。(カンプを確認し、HTMLとCSSで表現することをWEBデザイナーに指示しても構いません)

HTMLの特性上、コードを書くには内部SEOの知識も必須スキルになります。
また、W3C基準に準じたマークアップを心がけましょう。

WEBエンジニア/プログラマー

・制作環境一式の確認を行う(MySQL、PHPのバージョンなど)
・仕様書を見てプラグインや機能の確認
・システムのベースとなる部分のプログラミングと実装
・テスト環境にて動作の確認(結合テストなど)
・出来上がってきたHTMLファイルに動的コードを実装していく
・単体テスト/結合テストを繰り返し行う
・管理画面や動き、操作方法のレクチャーを行う

※注意点
仕様の確認は何度も行う必要があり、ケースによってはのちの追加や変更が非常に難しくなることさえあります。
基本ベースをどうするか、後の増える可能性のあるものはシステム設計前に事前に必ずコンセンサスと取ることが大事です。

チーム全員

・レイアウト崩れが無いかをチェックする(主にサファリ、クローム、エッジ、FireFoxなど)
・バグが無いかのテストを繰り返し行う
・出来る限りのデバイスを用意してすべてのデバイスで動作とレイアウトの確認をする
・目的に沿った設計に仕上がってるか、客観的に見てみる
・テキストの入力ミス、画像テキストのスペルやミスのチェックをする

※注意点
結合テストは全てのデバイスで行うべきでしょう。
全体的なデザインや仕上がりを見る際は、制作サイド目線を捨て、そのサイトを利用する側に立って見ると粗が良く見えてくることが多いです。
どうしても答えが出なければ、一晩寝かせて1日スケジュールを伸ばすのも手です。
作業疲れで気が滅入っていると、出来るジャッジも出来ませんし、普段では考えられない初歩的なミスをおかしてしまうものです。

大まかにWEB制作の現場はこのような役割分担になります。
※フリーランスの場合はこれらすべてを一人で行います。

プレリリース

テスト環境での確認が終えればいよいよプレリリースです。
スケジュール上または、プロセス的に未実装のコンテンツはそのままに、先に公開/納品を行います。

最終コンテンツと運用の確認

リリースに向けての最終コンテンツの制作をクライアントと詰めていきます。
また、今後の運用をどのようにしていくかの確認を行います。

よく使われる業界用語

・カルーセル
画像スライドの事

・ブレイクポイント
デバイスごとに切り替わるポイントの事

・レスポンシブ
見る画面サイズによって見た目/デザインが変化するWEBサイトの事

・モック
デザイン(又は完成品)のサンプルの事、主に画像を指し、当然ながらカーソルを乗せての操作は不可、カンプともいう

・デザインカンプ
上記と同じ意味だが主に印刷業界でも使われる

・ジェイクエリー
インタラクティブコンテンツを実装するためのソース

・デバイス
スマホやタブレットを始めとしたパソコン周辺機器を含む電子機器の事

・エスイーオー
SEO、サーチエンジンに結果として自身のページを引っ掛け表示させる事、プラットフォームによって技法も変わる

・ピクイチ
主にECサイトで使われる用語で、並べた商品画像の1枚目。サムネイルにも使われる重要な画像

・イーシーサイト
ECサイト、インターネット上で物販が行われるWEBサイトの事、電子商取引、ネットショップ

・クラウド
ウェブ上でのデータ保存、保管場所

・シーエスブイ
CSV、商品やページなどがまとめて記載されているデータファイル。それを触って更新するだけで大量のページでも一括で情報更新が可能

・コントロールカラム
楽天市場での商品一括登録で使う実行用のコードを書く列の事、u(更新)を書くことが多い

・ラクテンゴールド
楽天市場で販売を行う際に無料で使えるFTPサーバーサービスの事、一定期間で無料で容量増加申請が出来る

・マラソン/スーパーセール
楽天市場のセールの事、ポイント変倍設定など行いセールする

・アールキャビネット
R-Cabinet、楽天市場で画像と動画のファイル管理が行えるサービス

・アールエムエス
RMS、楽天市場の総合管理画面

・アールストアフロント
楽天市場の店舗の基本設定からストア構築を主に行う画面

・アールバックオフィス
楽天市場の受注や顧客管理、売上管理などを行う画面

・ストアクリエイターPro
Yahoo!ショッピングの基本管理画面

・ストアエディター
Yahoo!ショッピングでのストア構築を行うための画面

・セラーセントラル
Amazonで販売を行う際の基本管理画面

・ワードプレス
無料で利用できるCMSオープンソース、基本はブログ設計となっている、たまにワールドプレスと呼ぶ人が居るが、訂正せず聞き流しましょう

・ムーバブルタイプ
上記に同じだが、専用のMTタグを覚える必要がある

・スマーティー
Smarty、こちらも上記に同じだがさらに自由度は高い、PHP言語への知識がワードプレス以上に必要

・シーエムエス
CMS、コンテンツマネジメントシステムの事、文字通り更新追加がブラウザ上で簡単に行える管理画面を備えたWEBサイトの事、主にオープンソース系を指しワードプレスの他にJoomlaなども流行った、EC向けではOSコマース、ECキューブも広く普及していた

・オープンソース
無料で公開されているプログラムベースの事、設置やカスタマイズはユーザー自身が行い、それなりの知識も必要

・イーショップ
ショップサーブと言うシステムを使って販売サイトを構築できる有料サービス、独自ドメインが使えて自社サイトとして手軽に販売を開始できる

・ドウテキサイト
上に同じCMSの事、例えば文字部分が可変変数などで書かれ、データや状況に応じて出力される内容が変わることから動的と表現されている

・セイテキサイト
HTMLコードだけで書かれたWEBページ、更新にはファイルを直接編集する必要がある、ベタページ(HTMLをベタコード・ベタ書き)とも言われることがある、ブラウザ操作で自動で文字が変わったりしないので静的と表現される

・ベタ
上にも書いたがHTMLコードだけで作る事、「ベタで行こう!」と言われたら静的コードで書いて作ってと言う意味で、動的化させません、コスト面や一時的な更新、技術的に難しい箇所などベタで行くことが多いです

・エフティーピージョウホウ
FTP情報の事、ファイルトランスファープロトコルの訳で、WEBに関わるファイル一式をwww上へアップロードさせるための情報の事、wwwへ接続するにはソフトが必要

・ダブダブダブ
www、ワールドワイドウェブの訳、インターネット上の事でURLや検索で誰でもアクセス閲覧可能となる場所

・ユーアールエル
URL、WEBサイトのアドレスの事、階層/ディレクトリとファイル名も含む、パスとは区別する

・ゼッタイパス
絶対パス、どこに居ても変わることのない場所を指したwwwからのアドレスの事

・ソウタイパス
相対パス、ある設定した読み込み場所から目的の階層までのアドレスの事、記述元の場所が変わればパスが切れる、主にローカル内でのファイルパスの事でwwwの事を指さない

・パス
場所を示す住所の事、www上のドメインから示すケースと、ローカルファイル内で示すケースとがあり、前者は主に絶対パスと呼び、後者は相対パスと言うことが多い

・パーマリンク/パーマメントリンク
CMSから出力されるページIDなどの動的コードリンクの事、後ろにベタでパスを足すこともある、公開位置等を設定で変えても動的に変わることからリンクが切れることが無い

・フレームデ
フレームで読み込まそうと言う意味で、iframeタグを使ったインクルード手法、別ページの読み込みたい箇所に窓枠を作って表示させる、一つのファイルで複数ページを管理したい場合に有効、主にECサイトの管理画面内(RMSやストアエディターなど)で使われる

・インクルード
include、PHPタグでもあり、表示するしないに関わらず、コード内にファイルを読み込ませるコード、または外部読み込みの事

・ピーエイチピー
プログラミング言語のひとつでハイパーテキストプロセッサーの訳、高級言語でコンパイルを必要としないWEBライクで馴染みやすいコードが特徴、サーバー上のApacheと言うソフト上で作動する、ローカル環境では作動しないスクリプト、スーパーグローバル変数も数多く用意されているオープンソース言語(低級~高級は、より機械に近いか遠いか、遠いとコンピューターの力を借りて実行などの意味、低級は主にアセンブラを指す)

・ジャバ/ジャバスク
Javascriptの事で、開発言語(コンパイル言語)のJavaではない、WEB業界でJavaの話はまず出る事はない、WEBブラウザ上で作動するインタープリタ言語の事、オブジェクト指向のプログラミング言語、主にjQueryを使ってブラウザ上で動きを表現する時に使う

・ジェイエス
JS、音楽家のバッハの事ではない、意味は上に同じJavascriptの事

・フラグ
イベントや仕掛けが特定の条件によってONの状態になる事、主にプログラミング用語であり、フラグ(旗)を意味する(例:フラグが立つなど)

・フラッシュ
AdobeソフトのFlashではなく、画像スライドの事を指すことが多い、「ここフラッシュする?」とか聞かれることがあるが、「ここスライドする?」と言う意味

・ブイビーエー
VBA、マイクロソフトExcel上で動く表計算ソフトなど、Excelベースで使うソフトウェアを開発するための言語、ビジュアルベーシックとも言う(WEBではあまり使わない)

・コード
主にソースコードの事、WEBで使うHTML/CSSはもちろんJSやPHPもコードと呼ぶ

・ヒデマル
秀丸エディター、テキストを記述できるソフトウェアの事、コードを書くことにも特化しているのでコーダーやプログラマーも御用達

・インタラクティブコンテンツ
リッチコンテンツの事、画像がスライドしたり、多重スクロールしたり、クリックするとプルダウンしてきて何やら動きのするコンテンツの事

・ピーブイ
PV、ページビューの事で訪問ユーザーがページを閲覧した回数、主にアクセス解析用語

・ユーザー
WEBサイトの訪問者の事

・エンドユーザー
相対的な意味で最終的なユーザーの事、中間ユーザーの事は言わない

・エンドクライアント
例えばショップサイト制作時に於いてショップの人はクライアント、そのショップの商品を買うお客様はエンドクライアント、最終的なお客様の事を指す

・ユニークユーザー/ユニークアクセス
アクセスした人数の事、回数で重複カウントしない

・シーブイ
CV、コンバージョンの事で転換を意味する、訪問者が意図した特定のページで意図した目的のアクションを起こし、”顧客転換した”と言う意味、解析では転換率、転換数などで測るWEBサイトの最大の目標

・ターゲティング/ターゲットユーザー
どんな人が見るための物なのかと言う意味

・レスポンシブコウコク
簡単な最低限の設定で状況に応じて表示する広告の事

・キャンペーン
Google広告に於いて一番大きな分類を指す

・コウコクグループ
ある程度のキーワードの紐づけがある特定の広告

・キーワードのニュウサツ
現在がほぼ自動で入力不要だが、特定のキーワードで表示させるワンクリック単価の金額を決める、高いほど表示されやすいがクリックされると設定金額分課金される、低いと表示されない、ビッグキーワード程高額

・ビッグキーワード
例えば、洋服、旅行、化粧品など具体的でない言葉、単語の事

・ディスクリプション
説明文の事、メタの事を言う場合もあり、混同することもある

・エスキューエル
SQL(主にMySQL)の事で、動的サイトのデータベース、SQLコードと言う独自の言語を使う、主にサーバーサイドでページを表示する為の動的に記録されたデータの呼び出しを行う、ここでエラーが生じると、サイト全体がサーバーエラーとなってダウンする、動的サイトは呼び出し用のデータベースが無いと動かない

・ルート
サーバー用語で主にルート権限、最高の権限を指す、FTPサーバーに於いて一番上の階層

・アドミニストレーター
検定の事ではなく、パソコンなどの最高権限ユーザーの事

・アドミン
主に上に同じ意味だが、システム用語でアクセス権限を指すことが多い、主に管理者の事

・アカウント
特定の会員システムなどに登録されている又はしている自分専用の権利、権限、契約など

・エルピー
ランディングページの訳、ある特定の目的を持ったページの事でTOPページよりも重要な事が多く、先に着地(ランディング)させるページと言う意味

・エルピーオー
ランディングページの改善、最適化を行う事

・サテライト
衛星の意味で、あるサイトまたはページへランディングさせるためのサブページまたはサイト、サブプロモーションを行う場合もある

・フレキシブル
伸縮自由と言う意味で、主に幅100%で書かれたコンテンツの事、幅に合わせて伸縮する

・ピーディーシーエー
PDCA(昔は計画実行改善のPDSだった気がする、また本漁ってみます)、計画・実行・検証・改善の事、フレームワーク思考に分類する業務改善サイクル

・ピーディーエフ
PDFの事で、ファイル形式、フォーマットの事、Adobeアクロバットで編集、閲覧ができる電子書類に主に使う、ブラウザでも閲覧可能

・ピーディーエス
Photoshopの保存ファイルの形式、レイヤー情報やテキスト情報が残っており、編集の続きが容易な状態で保存されている

・エーアイ
Illustratorの保存形式ファイル、上に同じくレイヤー情報、ベクトル情報、が残っている状態、アウトライン済みでテキスト情報が残っていない場合もある、リンクファイルが埋め込まれていない場合は同じ階層にあっても移動させるとリンク切れが起こる

・イーピーエス
eps形式のファイル、ポストスクリプトで記述されたファイルでベクター情報が残っていて、画像や写真、絵などのファイル、印刷データに配置して読み込むファイルとしても使う、比較的軽いのが特徴

・ジェイペグ
jpe/jpeg形式のファイルの事、圧縮された画像

・ピング
png形式の画像、WEB用に特化されたファイル形式、解像度もWEB用な事から印刷には不向き、背景を透明に出来る

・ジフ
gif形式の画像、色数を限定して軽くできる、複数コマを使ってアニメーションも作成可能(アニジフ・ジフアニメとも言う)、たまに岐阜と言う人が居る

・ビットマップ
bmp形式の画像、点の集合体で絵や写真が表されているデータの事、圧縮されていないので重い事が多い

・ティフ
tif形式の画像、あるメーカーのデジカメはこの形式で写真を保存、現在ではあまり使う機会が無い

・シーエスエス
CSSの事で、カスケードスタイルシートの略、書いたHTMLにデザインを指定していく言語の事、セレクタ/疑似クラス、プロパティ、値の3つで主に構成される

・セレクタ
CSSで書かれるHTMLとを繋ぐコードの名称で、指定する箇所を名前(属性やID、クラス名)で決める、属性で決めると全てにスタイルがかかる

・メディアクエリ
CSS内で書かれるブレイクポイントの事

・ワイヤーフレーム/ワイヤー
サイトの大枠の形を線だけで書いた設計書のひとつ、筆者はよくワイヤーフレームと打つ時はワーヤーフレームとなっていることが多く、皆さんも気をtけて下さい、わーやーふれーむってなんやねんほんま

・フレームワーク
考え方の一つ、物事が起こる、人の興味や購買へ至る思考など、結果へ辿る仕組みをプロセス化し、ひとつひとつ解決していく流れ、考えの枠組み、AIDMA、AISASなどの購買行動をプロセスしてまとめ考察する、SWOT分析をして整理て洗い出し精査する(内部要因と外部要因、強み、弱みをマトリクス化)、3Cで現状を分析しひとつひとつを精査、洗い出しを行うマーケティング環境を分析する思考法のひとつ、主にWEBマーケティングにも用いられる思考論、他にも価値連鎖を考える分析して洗い出す、バリューチェーンもフレームワーク思考の一つ

・ホウレンソウ
報告・連絡・相談の事

・コンセンサス
相互認識、合意の事

筆者の思い付きでとりあえず書いてみましたが、WEB用語はキリがないくらいまだまだありますので、一旦思い付きを抜粋させていただきました。

まとめ

いかがでしたでしょうか?
あくまで平均的で一般的なWEBサイト制作のタスクとワークフローを書きましたが、もちろんこのケースに当てはまらない事も多々あります。
作業ももちろん大変ですが、業者間、クライアント間との費用も含めた事前コンセンサスと社内コンセンサスも非常に重要だと言う事もお分かりいただけるかと思います。
また、クライアントと制作チームの間に立つディレクターがしっかりと意向を汲み取っていないと全く違ったものが出来上がってしまうことにもなります。
これからWEBクリエイターを目指す方、好きであれば非常に楽しい職業ですのでイラストレーターやフォトショップを触ってみる、テキストエディターを使ってコードを書いてみる等から始めてみてはいかがでしょうか。
ガチ目にWEB制作を始めたい!最低限欲しいパソコンと揃えたい周辺機器は?業務目線とその理由

筆者の余談

WEBクリエイターになる人、またはなった人の多くは、イラストレーター、フォトショップを覚えてHTMLを覚える(又はその逆も)などだと思いますが、筆者はMacromedia Flash 2004MXと言うソフトを使ってホームページを作ることから始めました。
HTMLコードはこのFlashで書き出した.swfと言う形式のファイルを読み込ませるだけで、サイトそのものは全てFlashでの制作です。(今では考えられません・・・)
Flashでは絵を動かすことが簡単に出来るので(しかも絵をそのまま描ける)、スライドやボタンのロールオーバーも簡単に作れました。(モーショントゥイーンやボタンのシンボル等)
さらに、特定のページやオブジェクトの動きに条件フラグを付ける(ムービークリップにActionScriptを書き込む)ことでちょっとしたゲームのような動きも表現出来ました。
元々絵を描くことが好きでそれを動かせることにハマり、ちょっとしたゲームクリエイター気分にもなれて楽しかった記憶があります。
また、iPhone3GS出始めの頃は、WEBサイトなどでもFlashを使ったコンテンツが数多くあり、お仕事にも生かせてました。
アップルのデバイスがアドビが提供するFlashコンテンツに対応しない事から急速に需要が低下。
今では名前すら知らない、またはフラッシュと言えばスライド(現在はカルーセルと言います)の事だと思ってる人が多数います。
また、WindowsXPが爆発的に売れ、当時最新のブラウザがインターネットエクスプローラー5.5~6になったとき、このバージョン6の完成度が高く長く使う人が多かったことから、他のブラウザとの互換性の維持をすることが難しく、最新のクロームやFireFoxとの互換系を維持させるためのCSSのハックコードまで出回ってた時代がありました。
当時のWEBブラウザは主に、IE(インターネットエクスプローラー)、FireFox、GoogleChrome(かなり後に登場)、ネットスケープナビゲーター、Opera、スレイプニル、Windows版サファリなど種類も豊富で、現在はスマートデバイスに悩まされますが、当時はブラウザに悩まされました。
特にIE6だけは仕様が大きく違い、また利用者もなかなか減らず、クリエイターたちは早く消えてなくなってほしいと願っていたことが懐かしいですね。

お問合せ
宜しければお店や会社のサービスなど取材させていただき、写真付きで無料でブログで紹介させていただきます。
お気軽にお問い合わせください。

CONTACT 

OTHER CONTENTS 

Service

NEW