サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
体力トレーニング
www.designmap.info
Webデザイナーの就転職活動で、用意しておくと武器になるのがブログ付きポートフォリオサイトである。ポートフォリオとは、プロフィールとともに自分の作品をまとめて、自分の強みを知ってもらうツールである。それをサイト上でも見られるようにしたのが、ポートフォリオサイトである。おすすめしている構成は、プロフィール、作品、連絡先、ブログである。 ただ、作りたくても、なかなか作れないという声もきく。仕事ではないので、自由であり、締め切りもない。ついでに予算もない。ベテランのWebデザイナーでも自分のポートフォリオサイトをもっていない人は多い。今回はポートフォリオサイト、ブログ制作を前に進めるコツをまとめてみた。 衝動にかられて、ポートフォリオサイトを作っていた時代 以前、『ポートフォリオサイトをつくろう』でも書いたが、1999年頃、個人サイトがきっかけで、プロへの道を歩む人が結構いた。当時、サイトを運営
フリー素材をまとめておきます。利用規約を確認してつかうようにしてください。 フリー写真 Pixabay http://pixabay.com/ クオリティの高いパブリックドメイン（著作権なし）の写真が検索できます。ドイツの会社が運営しているWebサービス。日本語にも対応しています。電子書籍や無料講座の素材など個人的に一番ヘビーに利用しているサイトです。 Unsplash https://unsplash.com/ すべてが高品質で驚きます。しかもパブリックドメイン（著作権なし）。 StockSnap.io https://stocksnap.io/ 同じく、パブリックドメイン（著作権なし）の写真が検索できます。 Rgbstock http://www.rgbstock.com/ 登録が必要ですが、高品質な素材が無料でダウンロードできます。抽象的なイメージなど、素材で使える写真も多いです。
2010年に『ウェブ制作現場の職種と必要なスキルのまとめ』を書いた。最新動向をふまえて、制作側の職種を中心に改訂版を書いてみた。 フロントエンドエンジニア 近年、求人数が増えてきた職種で、Web制作で最も技術動向が激しい分野である。JavaScriptの専門家だが、数多くのフレームワーク、ライブラリー、ツールが発表されており、カバーするべき領域が広い。 Webのバックエンド制作では、フレームワークは使われてきた。特に2004年に発表されたRuby on Railsの影響が大きい。近年、フロントエンド制作でもフレームワークを導入するケースが増えてきた。フレームワークというのは、効率よく開発するための枠組みである。あらかじめ定番の処理はフレームワーク側に用意されていて、呼び出して使うことで開発コストを抑えることができる。CSSフレームワークであるBootstrap、MVCフレームワークであるA
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
筆者はWeb制作やクリエイター系に関しては、資格取得には懐疑的な立場である。勉強コストと取得後の効用を考えるとおススメできない。作品が重視される世界なので、資格が採用や受注の決め手になるとは考えずらい。資格講座をやっているスクールや開催団体が儲かるだけだ。 私自身、ウェブデザイナー、ウェブプログラマーを経ていくつか資格をとってきた。いわゆるＩＴ系のベンダー資格を取得した。独学だったのでスクールにはいかなかったが、受験費用は3万近くした。投資効果はほぼゼロだった。 ただ役にたつ資格がある。それが日商簿記3級である。 フリーランスのクリエイターに実際に役に立つ。実際はクリエイターだけでなく、営業や事務をやる人も必須の資格である。勉強期間は約１ヶ月程度で取得できる（ただし、勉強期間は取得した当時の話。現在、試験が難化している可能性があることに注意してほしい）。日商簿記は2級以上になると中小企業の
まずは大まかに基本操作をさわっていこう。 細かい機能、コマンドなどは覚えようとせず、さっと流そう。例えば、パスファインダであれば、［合体］、［分割］、［全面オブジェクトで型抜き］だけを理解すれば、当面は十分である。ツールもすべて理解したり、覚えたりする必要はない。色の付け方、複製、グラデーション、回転、縮小・拡大、リフレクトなどベーシックな機能だけをおさえる。 一冊目として、おすすめなのは『Illustrator トレーニングブック』である。安定した内容で、これ以上分かりやすく解説するのは難しいくらいの構成になっている。
端末の多様化がますます加速しています。ここ数ヶ月のニュースをみただけでも、AmazonのKindle、AppleのiPad mini、GoogleのNexus、MicrosoftのSurfaceなどの端末が紙面をにぎわしています。こうした端末「超」競争時代にどうやってWebサイトを構築したらよいのか。また、Twitterのように、モバイルユーザーがPCユーザーより増えているサイトも存在しています。 この対応策として、レスポンシブWebデザインという手法が生まれました。レスポンシブWebデザインは、１枚のHTMLで、あらゆる端末に適応させる手法です。一方で、従来から行われている手法に、最適化した専用サイトを用意する手法があります。 レスポンシブWebデザインをめぐる動き 2012年6月にGoogle ウェブマスター向け公式ブログで、『Google がお勧めするスマートフォンに最適化されたウェ
受託開発のWeb制作のワークフローは、「設計」→「デザイン」→「開発」という流れが一般的である。設計段階では、ディレクターやプランナーがワイヤーフレームをつくり、デザイン段階でデザイナーがカンプをつくる。カンプが固まると、開発段階にはいり、マークアップエンジニアがHTML、CSSでカンプの見た目を再現してゆく。再現するときも、余白のピクセル寸法をPhotoshopではかって、コーディングする。マークアップエンジニアはデザイナーの意図をどれだけわかるか、見えるが重要である。次に、フロントエンドエンジニアがJavaScriptをかぶせて、ふるまいの部分を追加する。最終的に、HTML、CSS、JavaScriptのコードが、バックエンド担当のエンジニアに渡される。PHPなどのサーバー側で動作する言語の「表示を出力する部分」に組み込まれる。 印刷物を踏襲したWeb制作のワークフロー カンプとは印刷
ウェブデザイナーの就職先は制作会社だけではない ウェブデザイナーの就職先は多岐にわたっている。 ウェブ制作会社、システム会社、ウェブサービス企業（楽天、ミクシー、グリー、はてな、クックパッド、ヤフー、グーグルのような自社運営サービスをもっている会社）、ECサイト運営会社、デザイン会社が主なわかりやすい就職先になるだろう。他にも穴場としては各メーカーなどが挙げられる。メーカーといってもアパレル、食品、家具、ジュエリー、電化製品など幅が広い。他にも出版社、放送局、印刷会社、金融関係なども求人がみつかる。 最近ではユニクロ、ジャパネット、ライフネット生命などの一般企業でもウェブ担当者の求人がでていた。一般的に大手にいくほどディレクション業務が中心になると考えておきたい。 ウェブ制作会社に勤めた場合 仮にウェブ制作会社に勤めた場合を考えてみたい。ウェブデザイナーの経験者で年収300万から400万く
ウェブエンジニアであれば、英語のドキュメントや洋書の技術書が読める英語力は必要である。 たとえば、PHPはフレームワークになると和書は少ない。オライリーの定番シリーズのクックブックもPHP版は良書なのに翻訳がでていない。レベルが中級者以上の本はなかなか翻訳されないというのが現状である。 さらにマイナーなフレームワークになると和書はゼロである。出版しても売れる見込みがない本は出版されない。技術書もiPhoneのようにブレイクしない限り名著でさえ翻訳されない。翻訳されたとしてもブームにのった翻訳なので翻訳の質が低いリスクがあり、和訳の意味がわからず原書にあたらねばならない場合もある。 英語のドキュメントが読めると情報源が一気に広がるし、英語が書ければ海外のクリエイターと直接、情報交換も可能になる。 まずはリーディング力をつけよう デザイナーであれ、エンジニアであればブログ、チュートリアル記事が
私が、初めて買ったPhotoshop本はいまも活躍されている高木和明さんの『FAKE IMAGE』である。書泉という大きい本屋で、あれこれ立ち読みして、悩んだ末に買った。やはり、本屋にいくと何を買ったらよいのかわからない。値段も、4,000円くらいで、気軽に買うのには勇気が必要だった。この本でアルファチャンネルを使った切り抜きや合成のテクニックを学んだ。買った当時は難解だったが、あとになって重宝した。いまだにお気に入り本のひとつで、本棚に置いてある。 Photoshopの奥の深さ Photoshopについては、よい本ないですか？ときかれる率がIllustratorより高い。 Illustratorはペンツール（ベジェ曲線）という峠をこえれば、憶えるべきパス関連のコマンドは少ない。一通り理解すれば、それなりに、イメージする形、アイコン、ロゴ制作ができるだろう（もちろん、あるレベルから先は本当
『未経験からWebデザイナー、Webクリエイターを目指す人のためのWordPressとTwitterをつかった就転職活動のすすめ』はURLが移転しました
2012年7月16日にアップした『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』は、昨年の同趣旨の記事を大きく上回る、おおきな反響をいただいた。 記事ではあまり感情や思い入れをいれずに、19のステップをたんたんと簡潔に書いた。 でも、実際は、ステップそれぞれの項目に思い入れがある。いろいろな挫折を経て、あの記事が生まれている。 今回は、勉強の挫折の話もしながら、あとがきをかかせてほしい。 早めにドメインをとる理由 「ステップ２ ドメインを取得しよう」は、昨年の記事と同様、２番目にもってきた。これは意味がある。 はやめにドメインをとり、Webサービスでも同名のアカウントをおさえる。 つぎに、自分のロゴマークをつくり、URL入りの名刺をつくるというカリキュラムを導入している。 実際に、URLを明記した名刺をつくり、周りの人に配ってほしい。どこで出会いのチャンスがあるか
今回は、短期間で、Web制作の全体を学べるカリキュラムをつくってみた。とても、シンプルなので試してほしい。 ステップ1：HTML、CSSを学ぼう 教科書：『HTML/XHTML&スタイルシートレッスンブック』 テキストエディタをつかって、手書きでHTML、CSSをかいてゆこう。 HTMLはWebページの土台と骨組みである。CSSは装飾、レイアウトを担当する。どちらも、言語というより、デザイン言語といったほうがしっくりくる。 最後に、レンタルサーバを借りて、FTPソフトを使って、データをサーバにアップロードをしてみよう。 FTPソフトの使い方は、レンタルサーバーのサポートページを参照しよう。私は、Mac環境でFetchを愛用している。このソフト、犬がかわいいですよ。 ステップ２：Dreamweaverを学ぼう 教科書：『Dreamweaver+HTML5&CSS3レッスンブック』 Dre
まったくのプログラミング初心者の方を対象にJavaScriptの独学方法をのべていきたい。今回とりあげるJavaScriptの勉強法はあくまでWebデザイナー向け（もしくはフロントエンドエンジニア向け）なので、Node.jsのようなサーバーサイドJavaScriptはとりあげていない。 JavaScriptとjQueryをどちらから勉強するべきか。今回はあえて邪道とわかっていながらもjQueryにふれるという順番をとった。本来は、JavaScriptの基礎をしっかりおさえてからjQueryにすすむのが正統である。今回はトップダウン方式で実践にふれてから、基礎に戻る学習法を提案したい。 jQueryはJavaScriptを楽に開発するためのライブラリで、jQuery自体はJavaScriptのコードでできている。最初にいきなりjQueryにふれて、HTMLを動的に操作する（これをDOM操作と
昨年のHTML5ブームやFlashが再生されないiPhoneの登場から、Flashはすたれるんでしょうか？という声をきくようになった。Flashは多様なユーザーに使われているツールである。HTML5以前から、既にすたれてしまった分野、今後もおそらくすたれにくい分野、予測が難しい分野がある。冷静に議論しよう。整理のために、Flashを次の側面にわけてみたい。 1. リッチユーザーインターフェイスをつくるツールとしてのFlash 2. アニメーション制作ツールとしてのFlash 3. アプリケーション開発ツールとしてのFlash 4. ActionScript3.0という言語 5. Flash Player（PCのWebブラウザ用、モバイルのWebブラウザ用、PC向けアプリ、モバイル向けアプリ） Flashがすたれるといわれる場合、上記のどの側面がすたれていくのかを判断しないといけない。上記の
まず、サンプルをご覧ください。写真のサムネールをクリックすると、現在表示されている写真がフェードアウトして、同時にクリックした写真がフェードインします。JavaScriptのライブラリであるjQueryを使ってつくっていきます。 対象者 HTML、CSSを学習した方（エキスパートレベルでなくても可能、『HTML/XHTML&スタイルシートレッスンブック』読了レベル） 必要なソフト Firefox 任意のテキストエディタ 素材のダウンロード チュートリアルに使う素材をダウンロードします。解凍した「crossfade_photoalbum」フォルダを任意の場所においておきます。 サンプルの動作環境 以下の環境で動作確認をおこないました。 jquery-1.7.1 Firefox8、Safari5、Chrome、InternetExplorer7 JavaScript、jQueryのオススメ本
<table> <tr> <td></td> <th scope="col">平成19年</th> <th scope="col">平成20年</th> </tr> <tr> <th scope="row">男</th> <td>559847</td> <td>559513</td> </tr> <tr> <th scope="row">女</th> <td>531643</td> <td>529971</td> </tr> </table> 「平成19年」のth（見出し用セル）は、「scope="col"」がはいっており、見出しに対応するtd（データ用セル）は列方向（下方向）ですよいう意味を表しています。「男」のthは、「scope="row"」がはいっており、見出しに対応するtdは行方向（右方向）ですよいう意味を表しています。 ビジュアルウェブブラウザでみれば、thとtdの対応は一目瞭
次のページ
このページを最初にブックマークしてみませんか？
『ホームページ制作｜web制作はオフィスエヌ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
