目指せ、Webデザイナー!

今回は、「メッセージ性」とは関係ない………

サイト製作に当たって

[ リスト | 詳細 ]

文字通り、「サイト製作に当たって」。
作る際に、「何に気をつけるべきか」、「どういったことを考慮するか?」 等を、テキストに習い考えてゆく。
記事検索
検索

全2ページ

[1] [2]

[ 次のページ ]

ウェブデザインに関るソフトウェア環境

テキストより引用〜
ウェブデザインをするときに使用する、便利なソフトウェアの数々

Webページを作るだけなら、テキストエディタと、見るためのブラウザだけですみます。
しかし、デザイン事務所の多くはオーサリングソフトを使っています。
オーサリングソフトは、単にHTMLエディタではないのです。サイトのファイル管理から、サーバへのアップロードまで、Web製作に必要なものをまるごと詰め込んでいます。
そのほかにも、Webサイトを作るときには、画像作成ソフトやFTPソフトも使われます。

Webブラウザ

仕事で作るうえでは、様々なブラウザによるチェックは欠かせません。
いくら、IEの独壇場だからと言っても、分母が分母ですから、少数派の数もバカに出来ません。
しかも、最近はOperaやFirefoxなどの新しいものも登場しています。
デザイナーは、複数のブラウザ、そして複数のバージョンで確認する必要があります。

オーサリングソフト

WYSIWYGによるWebページのデザインだけでありません。
ファイルの管理や、リンク切れのチェックも出来ます。
現在のオーサリングソフトはWebサイト製作の総合環境になっています。
最近のソフト(又は最新のバージョン)だと、W3Cの規格に準拠したデータを作成できるようです。
しかし、様々な機能がある分、それだけソフトが重くなってしまいます。
実際の職場でも、「ちょっとした修正はテキストエディタで」という人が多いようです。

その他の作成ソフト

Web画像作成ソフトや、Flashを作成するソフト等も必要です。
普通の画像作成ソフトで作った画像では、Webにアップするには大きすぎる場合があります。
Web画像作成ソフトでは、圧縮による劣化をシミュレーションすることが出来ます。

Flashを作るソフトで、有名なのはFlash MXでしょう。
でも、高い重いしで使ったことがありません…

テキストエディタ

HTMLを記述したり、修正をしたりする場合は、メモ帳では力不足です。
HTMLタグを色つきで表示したり、文字コードを変換できるものにしましょう。

その他のソフト

テキストによると、Microsoft Officeや、FTPソフト、スケジュール管理用のグループウェアなどもあったほうが良いとあります。
これらのソフトは、Web製作に直接関係しませんが、それをサポートするのに必要なソフトです。
文書を作るWordや、プレゼンのときに使うPowerPoint。
どれも、「無くても平気だけど、有ったほうが便利」というのは目に見えています。

スタッフ間のルール

スタッフ間のルール

引用〜
ウェブデザインをするときは、守っておかなければならないルールがあります。
グローバルルールとローカルルールを知っておきましょう。

グローバルルールとは、インターネットの決まりごと。
ローカルルールとは、スタッフ間でのルールです。

グローバルルールとは?

グローバルルールと言うのは、ファイル名の付け方や拡張子を初めとしたルールです。
これは、必ず守らねばならないルールです。
これを守らないと、公開することもままなりません。

ファイル名とフォルダ名

まず、Webで使用するファイル名は、半角の英数字しか使えません。
そして、使用できる記号は「-(ハイフン)」と「_(アンダーバー)」のみです。

大文字・小文字について

次に、アルファベットの大文字と小文字についてです。
サーバによって、大文字と小文字を区別する場合と、しない場合があります。
どちらにせよ、ファイル名は小文字だけでつけることを推奨します。

拡張子について

Windows上では、拡張子が大文字でも小文字でも、区別されません。
しかし、UNIXベースのインターネットでは区別されるようです。
これも、小文字で設定することをオススメします。

ローカルルールとは?

作業を混乱させないためのルールです。これは製作者が決めるものです。
例えば、HTML文書の拡張子は、「.html」でも「.htm」でも表示の仕方は同じです。
JPEGファイルの拡張子も、「.jpg」だろうが「.jpeg」だろうが変わりません。
どちらを使おうと、製作者の好みです。
しかし、サイト内ではどちらかに統一しなければなりません。
製作はグループワークです。他のメンバーが、どちらにすればよいか困ってしまいます。

ファイル名の付け方についてもルールが必要です。
例えば、「gakuensai.html」のように、出来事をファイル名にするのか、「05_0604.html」のように日付などをつけるのか、と言ったことです。

ファイルの整理の仕方にもルールが必要です。
各コンテンツのディレクトリごとに「imageフォルダ」と言った感じのフォルダを作り、そこに管理をする。
それとも、どのコンテンツでも、画像は1ヶ所に保存をするのか?
どちらにせよ、「どうするのか」というルールを統一する必要があります。
なお、画像は各コンテンツディレクトリごとに保存するほうが便利だと思います。

他にも、JPEGの圧縮率やHTMLのバージョン、1ページあたりの最大サイズなども決めておく必要があります。

作業スケジュールの管理

テキストより引用〜
作業が混乱しないように、しっかりとしたワークフローを作成しましょう

Webサイト製作の流れ

どの仕事とも、対して変わらないと思いますが、タグを打ったりするところは、Webならでは。
解説部分は、私がテキストより読み取ったものです。

1.オリエンテーション

これは、「どんなものを作るのか」と言うものを話し合うようです。
どんなイメージのサイトを作るのか? ターゲットはどうするのか? お金はいくらかけられるのか?
そんな事を(当たり前ですが)決めていくようです。

2.作業準備

サイトを作る際に使う素材(主に画像だと思う)を集める、外部協力者の確保、スケジューリング…
文字通り、作業の準備のようです。

3.サイトマップ(コンテンツディレクトリ)作成

さっぱりわかりません。サイトマップはともかく、コンテンツディレクトリとはなんですか?
各コンテンツのファイルを入れるためのディレクトリのことなのですか?

4.ラフデザイン

ここでは、絵で大まかなデザインを決めるようです。
HTMLで試作品を作る、ということはなさそうです。

5.プレゼンテーション

ここで、上司に「お金出してください」って言うのですか?
それとも、クライアントのほうに「これで良いですか?」というものなのですか?
恐らく後者だとは思うのですが……… はっきりとした裏が取れません。

6.パーツ作成

ボタンやアイコンなどを作るそうです。HTMLでもなく、コンテンツの中身(文章)でもない部分をここで作成するようです。
Flashもこれに入るようです。

7.テンプレート・スタイルシート作成

=== 8.ページデザイン(HTMLコーディング)==
両方とも見たとおりのことです。が、腑に落ちません。
テンプレートを作ってから、スタイルの設定をしてからデザインをするのですか?
どうにもよくわかりません。

9.テスト・修正

このテストとは、オフライン上でのテストのようです。
しかし、どんなテストをするのか書いてありません…
「きちんと表示されるか?」「意図したレイアウトで表示されるか?」と言うものなのでしょうか?

10.サーバにアップロード

これも、読んで通りのようです。「ドメイン取得」なども入るようです。

11.検証・確認

ここでは、文章の中身が適切かどうかのテストをするのでしょうか?
さきの「テスト・修正」というのと、「検証・確認」という言葉から見ると恐らくそうだとは思いますが…

12.公開

「中身は完璧だ。どこにも落ち度が無い」と言う状態にしてから、やっと公開するようです。

13.更新・リニューアル

Webサイトは、作って終わりではない。作った後も、きちんと更新しなければなりません。

スケジュールの管理

人数が増えるほど、管理が大変になるのは言うまでもありません。
Webの仕事だからと言って、スケジュールの管理に変わったところは見当たりません。
「Excel等で作成したり、グループウェアを使用しましょう」みたいな事が書いてあります。
Webだって、仕事は仕事。仕事の中身は違っても、管理に使うものは変わらないようです。

感想

テキストだけだと、「そうなんだ」程度しかわかりません。実際に働かなきゃわかりません。
なんだか、とても腑に落ちない内容です。

結局、準備が大切なのはどの仕事でも変わらないようです。
本当に、「物」を作るのは最後のほうだけで、あとはそのための準備ばかりです。

役割分担

役割分担

テキストより引用〜
ウェブデザインと言っても、その内容は多岐にわたります。

まず、当たり前の話ですが、仕事は「グループワーク」が前提となります。
よほど、小さい会社・プロジェクトで無い限り、1人で仕事をすることは無いようです。

複数人で仕事をする。それに当たり、「役割分担」が必要になります。
そして、しっかりとしたスケジュールの管理も必要になります。ただ、スケジュールに関してはまた別の機会に…

Web製作スタッフの役割

Webに限らず、仕事においては自分の役割をきちんと理解して、作業をしなければなりません。
なお、実際に働いたことが無いので、この分類についてはテキストのままです。
箇条書きにしてある仕事以外は、etc.となっていたので、実際に働いて見ないとわかりません。

プロデューサー(ディレクター)

・企画立案
・プレゼン
・予算管理
・スタッフ選定
・進行管理

別に、Webだからと言って、特に変わったことは無いですね?
企画を立てたり、プレゼンをしたり、予算の管理をしたり………見た通りそのまま。
企画の立案、スタッフの選定、進行管理。これ以外の仕事はWebの専門でなくても出来そうです。

デザイナー

・インターフェース
・ページデザイン
・ナビゲーション
・テキストレイアウト

デザイナーの仕事は、目に見える全ての部分に関係するようです。
ですから、ページの(グラフィカル)なデザインだけ出来てもしょうがないわけです。
ユーザに優しいインターフェースとは、どういうものか? どういったナビゲーションが適切か? テキストをどう配置・デザインすれば効果的か?
幅広い知識が必要になりそうです。

コーディング

・HTML
・CSS
・ JavaScript 
・Flashアクションスクリプト
・CGI
この人たちは、言うなれば「縁の下の力持ち」というものなのでしょうか?
デザイナーの要求を形にする作業をするようです。
HTMLとCSSだけでなく、他にも色々な知識が必要になるようです。
サイトによっては、XMLやSQLも必要になったりするのでしょうか?

システムエンジニア

・サーバ設置
・データベース設計
・セキュリティ確保
・プログラミング

たぶん、素人だと全く気づかない仕事だと思います。しかし見えないだけで、とても重要な仕事をしています。
彼らを無くしては、仕事(サイト製作)が出来ないと思います。
ここで、個人的な考えを1つ。
今回5つの仕事を上げました。でも、システムエンジニアになるためにする勉強が1番つまらないと思います。
どれも「仕事、仕事」した(普通の人は面白みを感じない)勉強ばかりです。しかも、難しいものばかりです。HTMLとはわけが違います。
システムエンジニア。これはかなり、敷居が高いと思います。

編集・コピーライター

・構成・企画
・取材
・原稿執筆
・リライト
・用語統一
・構成・検証

これは、Webの知識が無くても大丈夫そうです。でも、別の知識が………
この仕事は、コンテンツの中身を作る仕事です。
でも、本当に「Web」と言う感じがしない仕事な気が………
実際、「Web専門、Webだけ」というライターなんて、まずい無いのでは?

感想

幅が広いです。率直な感想として、「全てをカバーすることは出来るのだろうか?」と不安になっています。
やはり、「何でもこなせるマルチなクリエータ」と言うのを目指すことは無謀に近いようです。
しかし、会社やプロジェクトによってはこれを1人でやらねばならないなんて………
企画を立てる、記事を書く、デザインを考える、それを形にする。ここまでは、まぁ、出来なくは無いでしょう。
しかし、「セキュリティ」まで… やはり、仕事をしている人はレベルが違います。

P.S.
記事の大半が「思います」となっていて、無責任な感じを受けるかもしれませんが、仕事をしたことが無いので何も言えません。
テキストより引用〜
Webサイトは見る側の環境によってレイアウトや表示が変わってしまいます。

孫子も言っています。「彼を知り、己を知れば百戦危うからず」
まずは、ターゲットの環境について調べましょう。

考えうる環境の違い

まずは、通信環境の違いが挙げられます。ダイヤルアップとADSLでは、2000倍もの差があるようです。とても大きな差です。
次にOSの違いが挙げられます。WindowsとMacintoshというのが大半でしょうが、UNIX系のOSも、決して0ではないのです。
そして、表示解像度も環境の違いといえます。ただし、今日では解像度、というよりもディスプレイの大きさといったほうが良いようです。
最後にブラウザです。ほとんどがIEを使っているとはいえ、IEのなかでもバージョンの違いというものがあります。最近は、新しいブラウザも登場していることですし、どうなるかわかりません。
それでは、詳しく見ていきましょう。

通信環境について

今日日、ダイヤルアップを使っている人なんて少ないかもしれません。しかし、彼ら(ダイヤルアップ)もターゲットに入れる場合は、きちんと考えてサイトを作らなければなりません。
ブロードバンド、ブロードバンドと言っても、パソコンぐらいです。モバイル環境では余り(一般的では)ありません。
誰(どんな通信環境)をターゲットとするかによって、サイトのデザイン(サイズ)は変わります。

OSの違い

デファクトスタンダード。今やWindowsがシェアを占めています。だからと言って、Macintoshや、Unix、Linux等を無視できるでしょうか?
例えシェアが100分の1だとしても、分母となる数字はいくつでしょうか? 100万人の中の1%でさえ、1万人なのです。
個人のサイトなら無視できるかもしれませんが、企業のサイトとなると………
パソコンだけでもこのような違いがあります。しかし、ネットに接続できるのはそれだけでしょうか?
携帯電話、果てにはゲーム機まで。仕事で作るとなると、こういったものも考慮する必要があります。

WindowsとMacintoshについて

テキストで解説しているのは、(特にメジャーな)この2つだけです。ですが、シェアから見るとこれだけで9割は網羅しているはずなので………難しいものです。

表示解像度

WindowsとMacintoshでは解像度が違うそうです。Windowsは96dpi、Macintoshは72dpi。この数が多いほうが、より細かなところまで表示されます。
しかし、最近のパソコンではご存知の通り、解像度の切り替えが出来ます。これについては大した問題ではないと言えるでしょう。
最も問題なのは、OSごとに解像度が違うことよりも、ディスプレイの大きさが違うことなのです。

フォントについて

テキストより引用〜
WindowsとMacOS 0、さらにOS Xでは、システムに標準インストールされているフォントのデザインが違うため…(略)…

見た目が大きく変わると言うことです。サイズから行間まで変わってしまいます。
Windowsではちょうど良く見ても、MacOS等では狭かったり、広かったり、小さすぎて読みにくかったりしてしまうかもしれません。

ガンマ値

モニタの明るさと彩度を調整する値のことです。難しいことさておいて、通常WindowsのほうがMacintoshよりも暗く見えるようです。
Macintoshだとちょうど良く見えても、Windowsで見ると、暗くて細かなところがわからない。又はその逆。
そういったことが起きてしまいかねません。

ブラウザの違い

これは、皆さんも実感していることでしょう。ブラウザによって、かなりの違いがあります。
CSSの解釈が違っているだけならともかく、最悪な場合表示されない、と言うこともありえます。
また、各ブラウザ独自のタグやスタイルも存在します。「IEでは見えたのに…」ということもままあります。
例えば、スクロールバーの色変えもIE独自の機能のようです。
また、以上のことはブラウザのバージョンについてもいえます。
他にもプラグインの有無なども重要な問題となります。

まとめ

ターゲットをどうするか。これを絞り込む必要があります。
「全ての機器で、同じように見られる」これは理想ではありますが、現実的に考えて無謀ではないでしょうか?
文字コードの違い。ブラウザでの対応の違い。これは(Webの)製作者側だけの問題ではないと思います。
それでも、より多くの人に見てもらいたい。そういう場合はやはり、複数の環境でチェックをしなければなりません。

全2ページ

[1] [2]

[ 次のページ ]


.
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

過去の記事一覧

標準グループ

登録されていません

たー
たー
男性 / A型
人気度
Yahoo!ブログヘルプ - ブログ人気度について

Yahoo!からのお知らせ

よしもとブログランキング

もっと見る

[PR]お得情報

数量限定!イオンおまとめ企画
「無料お試しクーポン」か
「値引きクーポン」が必ず当たる!
ふるさと納税サイト≪さとふる≫
実質2000円で好きなお礼品を選べる
毎日人気ランキング更新中!

その他のキャンペーン


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事