<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>londoner25.net &#187; Web</title>
	<atom:link href="http://londoner25.net/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://londoner25.net</link>
	<description>londoner25の日記</description>
	<lastBuildDate>Sun, 22 Aug 2010 15:48:28 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://londoner25.net/tag/web/feed/" />
		<item>
		<title>Web制作者としてこれからの自分の振る舞いを考える</title>
		<link>http://londoner25.net/2010/04/11/my-future/</link>
		<comments>http://londoner25.net/2010/04/11/my-future/#comments</comments>
		<pubDate>Sun, 11 Apr 2010 10:43:38 +0000</pubDate>
		<dc:creator>londoner25</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Webサイト]]></category>
		<category><![CDATA[チラシの裏]]></category>

		<guid isPermaLink="false">http://londoner25.net/?p=493</guid>
		<description><![CDATA[チラシの裏に書くべきような内容ですが、
会社の先輩に感化されて自分を見つめ直してアウトプットしてみようと思います。

今の自分
自分は現在Web制作会社でコーダーとして主にWebサイトの構築を担当しています。
Webサイ [...]]]></description>
			<content:encoded><![CDATA[<p>チラシの裏に書くべきような内容ですが、<br />
会社の先輩に感化されて自分を見つめ直してアウトプットしてみようと思います。<br />
<span id="more-493"></span></p>
<h2>今の自分</h2>
<p>自分は現在Web制作会社でコーダーとして主にWebサイトの構築を担当しています。<br />
Webサイトの構築というのは平たく言うとデザインをHTMLファイルに変換し、サイトの構造を考える仕事です。<br />
ただ、サイトの構造を考えると言っても更新案件やリニューアル案件ばかりで大掛かりな作業ではないし、ディレクターからの指示がないので適当にやっている感じです。</p>
<p>自分の会社の仕事の捉え方は「デザインファイルとHTMLで見た目にそんなに差がないものを作れば良いんでしょ」というかなり低いものです。今現在のワークフローは他者（ディレクター）に依存しているけど、要求に応えてくれないのでそれなら相応の仕事しかしませんよ…というスタンスと言えます。<br />
ただ、このスタイルだと会社のためにならないし、自分のためにもならない。（会社のためになる仕事の取り組み方を考えるのは自分の作業領域外と思っていますが）</p>
<p>Web制作者はまあ実力さえあればフリーでもやれるし、もっと条件の良い会社に引っ張られることもあるかもしれません。最終的には全ての作業内容は自分に跳ね返ってくると思います。<br />
今回は今の仕事のスタンスと自分の実力に対して、かなり未来は暗いなと思ったので自分を律する意味でも、自分というものを見つめ直してアウトプットしてみようと思いました。</p>
<p>今の自分は、最低限のクロスプラットフォーム・クロスブラウザで問題なく閲覧出来るサイトを作るためのHTMLとCSSの知識がある、という程度のものです。<br />
今の時代だとそれでもギリギリ食べていけるのですが、これからWeb、特にHTMLの分野は急速に進化していくと思うので、デザイン通りにHTML化すればいいという段階で止まっていては溢れてしまうと思います。</p>
<p>特にコーダーと呼ばれる役割の人間はJavaScriptのプログラミングが出来ることは必須になってくると思われます。<br />
また、HTMLは4から5に変わろうとしている時期にいて、まだ普及しないだろうと思って何も勉強していなければいざ問題なく使えるようになったときに大きく出遅れることになってしまいます。<br />
そして、HTML4はWeb文書のためのマークアップ言語でしたが、HTML5は文書のマークアップを強化させつつWebアプリケーションのためにマークアップ言語に生まれ変わろうとしています。</p>
<p>HTML5ではCanvasなどインタラクティブなことが出来る新要素が追加されますが、それを使うにはJavaScriptの知識が必須です。また、HTML5にはAPIが追加されていて、クッキーでは扱いきれないデータをブラウザに保存するなど画期的な機能などが追加されますが、それらを利用するためにやはりJavaScriptが必須です。<br />
JavaScriptやjQueryを使って動きのあるサイト、魅力的なUIを提案出来るようになった方がコーダーの仕事の幅が広がるから良いよというレベルの話ではなく、遠からぬ将来にJavaScriptが出来なければ何もできませんよ、という時代がきてしまいます。</p>
<p>HTML4.01,1XHTML1.0とCSS2.1のIE6が認識出来るレベルのプロパティしか使えない低いレベルのコーダーの自分の将来は極めてくらいと言えます。</p>
<h2>コーダーに求められる仕事</h2>
<h3>現在、最低限できなければならないこと</h3>
<ul>
<li>IE6やモダンブラウザで崩れることなく、出来れば全く同じ見た目を再現</li>
<li>jQueryなどのプラグインを用いてWebページに動きをつける</li>
</ul>
<h3>今後、必要とされるスキルと仕事</h3>
<ul>
<li>文書構造や内容を意識したマークアップ</li>
<li>HTML5の知識</li>
<li>CSS3の知識</li>
<li>検索サイトに収集されやすいページの構築ノウハウ（いわゆるSEO）</li>
<li>Webサイトの表示の高速化</li>
<li>JavaScriptを用いて思い通りの動きをサイトに付与する能力</li>
</ul>
<h4>上記にプラスαであったら良い知識</h4>
<ul>
<li>Webライティングの知識</li>
<li>情報アーキテクチャ</li>
<li>プログラミングやCMSのカスタマイズ</li>
</ul>
<h2>まとめ</h2>
<h3>今の自分にできること</h3>
<p>会社での今の自分は先述の通り、最低限の文書構造の意識をするくらいで、サイトが見れたら良いという感じで作業を行っています。<br />
その作業も全て自分に跳ね返ってくるので、言い訳をするのもアレなのですが、会社的にしっかり文書構造が練られたHTMLが必要とされていない点とそれに伴って制作時間が極端に短い点から短期的に見てあまりしっかり作るメリットがありません。</p>
<p>とは言え、全ての案件でそうであって良いわけでもないので、もちろん多少なりとも勉強はしています。<br />
今後必要になってくるであろう、Web技術では文書構造や内容を意識したマークアップやフロントエンドで対策出来るWebサイトの表示の高速化は身につけています。<br />
あとはCMSの軽いカスタマイズくらい……</p>
<p>まだまだ本当に何も出来ないと書きながら悲しい気分になってきます。</p>
<h3>今の自分に出来ることを踏まえてこれからどうしていくのか</h3>
<h4>文書構造を意識したマークアップ</h4>
<p>まず、コーダーにとって最低限できるようにならないといけないところは文書構造を意識したマークアップだと考えます。HTML5はWebアプリのためのマークアップ言語に生まれ変わりますが、文書としてもかなりパワーアップします。HTML5のセクショニングコンテンツの概念を理解することで文書構造を意識したマークアップは自然にできるようになるでしょう。</p>
<p>まずは購入したHTML5本2冊を読破し、内容を把握、HTML5のWebサイトを中止して情報収集し、個人サイトで実践していくことが必要。</p>
<h4>HTML5とJavaScript</h4>
<p>まず、漠然とHTML5でどんな機能が増えたかというのを知り、次にどういうことが出来るのか考え、調べて知ることが必要。そして、それらを使うにはJavaScriptを知る必要があります。それ以外にもJavaScriptを使えばWebの表現の幅が広がっていくので理解する必要があります。<br />
そして、今後個人サイトを新しく制作する場合は基本的にHTML5を用いていくのが良いと思います。</p>
<h4>Webサイトの表示の高速化</h4>
<p>ネットワーク自体が高速化されてきて、大きめの画像ファイルが使われだしたり、JavaScriptが再びクローズアップされてきて、凄いビジュアルのサイトでは結構表示に時間がかかってしまったり、あまり画像を使っていないサイトでも作り方次第では妙に表示が遅いサイトになってしまいます。<br />
今の時代のWebを閲覧する人々は割とせっかちで、3秒以上表示に時間がかかるサイトは見ずに離脱してしまう場合が多いと聞いたことがあります。<br />
そのため、小さなことからコツコツと表示を速くする施策は必要です。<br />
フロントエンドで完結出来る部分についてはオライリーの本にて把握済み。<br />
実際に同じような構造のサイトで比較してみましたが、体感でも速いことがわかるくらいの差が出ました。</p>
<p>今後はサーバーの設定を変更するなどバックエンドの処理を身につけていかないといけないと思います。</p>
<h4>SEO</h4>
<p>SEOに関してはこれからもどんどんルールが変わっていくと思うのでそれを注視していかなければなりません。<br />
また、Googleではサイトの表示速度も順位決定に影響を及ぼす仕様になったようですし、HTMLの構造をしっかり意識して制作するなど上記の内容をしっかり実践できていればとりあえず大丈夫かなと思っています。</p>
<h4>CSS3</h4>
<p>CSS3に関しては現状では専門書は存在していないので、Webで情報を収集しつつ個人サイトで実践してみたり、許可が必要だとは思いますがお遊びで仕事のサイトにねじ込んでみるのも悪くないと思います。</p>
<h4>CMSカスタマイズ</h4>
<p>CMSカスタマイズは大手企業の案件ではそんなに用いる機会はないと思いますが、もしも中小企業などを相手にする場合はこのスキルは必須だと思います。さらに、CMSと言っても様々なタイプのものがあるので、各々の特性を理解し、どのようなサイトではどのCMSを用いるのがベターかというのを知っておく必要があります。</p>
<p>トレーニング方法としては、例えば個人サイトを複数のCMSで同じ制作してみて、一番しっくりきたものを公開し、他のものを非公開にしておくとか、個人サイトのネタがないのであれば、絶対に公開をしてはなりませんし、コンプライアンス的にもギリギリのラインだと思いますが、仕事で作ったサイトをCMSに移植してどれで運用するのが一番楽なのか見極めるのもいいかもしれません。</p>
<h4>つまるところ何をすることが必要か</h4>
<p>クライアントにもよりますが、仕事では冒険がなかなかしにくいですし、冒険するのもしっかり準備をしてからするのがベターです。結局は個人サイトを作り、それで実験を繰り返しながら知識を貯えていくのがWeb制作者として成長する一番良い形ではないかと思います。</p>
<p>自分のサイトを良くするために勉強するというのが動機付けとしても一番わかりやすいことですし、自分のサイトが自分が思い描いた通りの動きや表示をしてくれたらより嬉しいものだと思います。</p>
<p>ただ、制作会社で仕事をしていると割と残業が多くて、なかなか時間が取れない部分もあります。<br />
それを改善するためには自分で自分を管理するセルフマネジメントを身につける必要があると思います。<br />
自分のケースでは割と他者に振り回されることが多いですし、他者に依存しても期待通りの結果が返ってきません。<br />
そういう事情もあり、未だに作っていない自分用のコーディングガイドラインや、更新履歴のメモのフレームワーク化など、自分用Web制作フレームワークなるものを作れば、会社での仕事、個人サイト制作、もしもフリーランスになったときにも使えますしあればかなり便利だと思います。というよりも出来る制作者はそういうのを持っているはずです。</p>
<p>ハッキリ言って今まで出来ていなかったので、いきなり完璧にこなすことは無理と思います。出来ない自分を理解して(&lt;-この部分受け売り）まずは何が必要か洗い出し、優先順位を決めて地道に進めていくことが良いと思います。<br />
結局きっちり計画を立ててもその通りことは運びませんし、最初から完璧を求めると完璧に出来ないと感じてそこでやる気をなくしてしまうのでどんどんブラッシュアップしていく形で制作を進めていくことが自分にとって大切です。</p>
<p>今後は以下のことを意識して制作に取り組み、制作者としてレベルアップしていきたいです。</p>
<ul>
<li>やること・やりたいことを洗い出し、優先順位をつける（出来れば紙に書く）</li>
<li>自分用の制作フレームワークを作る</li>
<li>個人サイト（HTML5とCSS3とJavaScriptやその他周辺技術、そしてCMSを積極的に用いて）制作を積極的に行う</li>
</ul>
<p>結局、何が言いたいのか自分でもまとまりきらなかったなと残念に思っていますが、これから必要である技術を積極的に用いたWebサイトを作り、アフィリエイトでうまうまするために必死に作り込めば自然と道は開ける、ということ。</p>

	<h2>関連する投稿</h2>
	<ul class="st-related-posts">
	<li><a href="http://londoner25.net/2009/05/03/gravator/" title="WordPressでGravatorを表示 (2009 年 5 月 3 日)">WordPressでGravatorを表示</a> (3)</li>
	<li><a href="http://londoner25.net/2009/05/16/float-width/" title="包含ボックスからフロートした要素が飛び出す (2009 年 5 月 16 日)">包含ボックスからフロートした要素が飛び出す</a> (0)</li>
	<li><a href="http://londoner25.net/2009/02/21/firstentry/" title="ブログはじめます (2009 年 2 月 21 日)">ブログはじめます</a> (0)</li>
	<li><a href="http://londoner25.net/2009/03/17/discover-bookmarklet/" title="これは恥ずかしい (2009 年 3 月 17 日)">これは恥ずかしい</a> (0)</li>
	<li><a href="http://londoner25.net/2009/05/23/diplay-inline-3px/" title="liをdiplay:inlineで横並びにした時の画像と画像の間の3pxの隙間を埋める方法 (2009 年 5 月 23 日)">liをdiplay:inlineで横並びにした時の画像と画像の間の3pxの隙間を埋める方法</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://londoner25.net/2010/04/11/my-future/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://londoner25.net/2010/04/11/my-future/" />
	</item>
		<item>
		<title>WordPressでGravatorを表示</title>
		<link>http://londoner25.net/2009/05/03/gravator/</link>
		<comments>http://londoner25.net/2009/05/03/gravator/#comments</comments>
		<pubDate>Sun, 03 May 2009 14:11:42 +0000</pubDate>
		<dc:creator>londoner25</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Webサイト]]></category>

		<guid isPermaLink="false">http://sloppy-idle.com/?p=12</guid>
		<description><![CDATA[Gravator普及委員会を発足します。]]></description>
			<content:encoded><![CDATA[<p>自分のコメントアイコンに画像が設定されています。<br />
これはGravatorというWebサービスにメールアドレスを登録すると表示できるようになります。アップロードするなり登録したアドレスに画像を設定しWordPressのような対応しているツールでメールアドレスを入力するとアイコンが表示されるようになります。</p>
<p>さあ！みなさん！興味があるならGravatorに画像を登録しましょう！</p>
<p><a rel="nofollow" href="http://ja.gravatar.com/">Gravator</a></p>

	<h2>関連する投稿</h2>
	<ul class="st-related-posts">
	<li><a href="http://londoner25.net/2010/04/11/my-future/" title="Web制作者としてこれからの自分の振る舞いを考える (2010 年 4 月 11 日)">Web制作者としてこれからの自分の振る舞いを考える</a> (5)</li>
	<li><a href="http://londoner25.net/2009/05/16/float-width/" title="包含ボックスからフロートした要素が飛び出す (2009 年 5 月 16 日)">包含ボックスからフロートした要素が飛び出す</a> (0)</li>
	<li><a href="http://londoner25.net/2009/02/21/firstentry/" title="ブログはじめます (2009 年 2 月 21 日)">ブログはじめます</a> (0)</li>
	<li><a href="http://londoner25.net/2009/03/17/discover-bookmarklet/" title="これは恥ずかしい (2009 年 3 月 17 日)">これは恥ずかしい</a> (0)</li>
	<li><a href="http://londoner25.net/2009/05/23/diplay-inline-3px/" title="liをdiplay:inlineで横並びにした時の画像と画像の間の3pxの隙間を埋める方法 (2009 年 5 月 23 日)">liをdiplay:inlineで横並びにした時の画像と画像の間の3pxの隙間を埋める方法</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://londoner25.net/2009/05/03/gravator/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://londoner25.net/2009/05/03/gravator/" />
	</item>
		<item>
		<title>ブログはじめます</title>
		<link>http://londoner25.net/2009/02/21/firstentry/</link>
		<comments>http://londoner25.net/2009/02/21/firstentry/#comments</comments>
		<pubDate>Sat, 21 Feb 2009 09:05:22 +0000</pubDate>
		<dc:creator>londoner25</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[目標]]></category>

		<guid isPermaLink="false">http://londoner25.net/londoner25wp/?p=1</guid>
		<description><![CDATA[ブログをはじめます。このブログを通じて人脈など作りたいです。]]></description>
			<content:encoded><![CDATA[<p>ブログをはじめます。<br />
今までテーマ別に何個かブログを作っていましたが、続かないのでひとつに統一することにします。</p>
<p>目的</p>
<ul>
<li>調べた情報や勉強したことのインプット＆アウトプット</li>
<li>自分の考え・疑問の発表と意見交換</li>
<li>日々の生活の楽しみをつくること</li>
<li>Webに関する人脈作り</li>
</ul>
<p>興味があることはサッカー、Web、FM（PCのサッカーゲーム）なのでその話題が中心になると思います。内容は多岐に渡るので購読していただけるようなブログにはならないかもしれませんが、もしも、一定の読者がみたいな人がついたら分離独立をすることも考えています。</p>
<p>一番の目的は現在Webの世界で働いていますので、その勉強をしてなんらかの人脈を作ることです。<br />
勉強し、それを実践して試行錯誤を繰り返し、実力あるWeb制作者になりたいと思っています。</p>
<p>目標</p>
<ul>
<li>毎日1記事投稿（最悪1日1記事ペース）</li>
<li>以前書いていたサッカーブログ（2年）の更新期間を超える</li>
<li>会社で書いているブログにアクセス数で勝つ</li>
<li>ブログを書いていて良かったと思えるブログを作る</li>
</ul>
<p>ちょっと3日坊主なのところがあるのでどうなるかはわかりませんが、出来る限り1日1記事を心がけます（以前のサッカーブログでは4ヶ月目までは内容の1日1記事ペースで書けていました）。もちろん目標なので最終的には無理せず自分のペースで…という考えに変わっているかもしれませんが…</p>
<p>その以前書いていたサッカーブログ（<a href="http://balompie.londoner25.net/">http://balompie.londoner25.net/</a>)はサッカーを見ることが出来ない環境になってしまったので打ち切りにしました。13ヶ月やってたのですが、半年過ぎから極端に更新量は少なくなっていました。今回はサッカー限定ではないのでネタは尽きないと思いますし出来るだけ長くやりたいです。</p>
<p>会社のブログも最近スタートしたのですが、今のところアクセス数が少ないです。このブログをまず1番最初のライバルとしてアクセス数で勝ちたいと思っています。</p>
<p>究極の目標は生活にハリを与えるなので書いていて良かったと思えるブログにしたいです。</p>
<p>ブログを書くのは自分のため。でも書くからには他人の役にも立ちたい（楽しませたい）と思っていますので、よろしくお願いいたします。</p>

	<h2>関連する投稿</h2>
	<ul class="st-related-posts">
	<li><a href="http://londoner25.net/2009/05/03/gravator/" title="WordPressでGravatorを表示 (2009 年 5 月 3 日)">WordPressでGravatorを表示</a> (3)</li>
	<li><a href="http://londoner25.net/2010/04/11/my-future/" title="Web制作者としてこれからの自分の振る舞いを考える (2010 年 4 月 11 日)">Web制作者としてこれからの自分の振る舞いを考える</a> (5)</li>
	<li><a href="http://londoner25.net/2009/03/21/one-month/" title="1ヶ月連続更新達成 (2009 年 3 月 21 日)">1ヶ月連続更新達成</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://londoner25.net/2009/02/21/firstentry/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://londoner25.net/2009/02/21/firstentry/" />
	</item>
	</channel>
</rss>
