2014年4月26日開催のCSS Nite LP33の再演版で登壇して参りました。僕はLP33に出てませんので、再演版なのに再演ではないという按配。それと、再演でもないのになんで出てんのっていうと、ネットイヤー坂本くんが急きょ登壇中止となったので代わりに出てくれないかという打診がありまして、準備期間が短いけれども、本ブログでもすでに公開済みの「おかんでもわかるUXデザイン」であればいけるだろうと快諾した次第でありました。 先日公開しました「おかんでもわかるUXデザイン Ver.0.1」は、スライドシェアにて15,000viewsを超える参照数を頂いておりまして、正直、CSS Nite来る人とかもう全員見てんだろう、と思っておりました。なのでただでさえ再演じゃないのに、内容もみんな知ってるみたいな前提を思っていて、本当に心折れそうな按配だったのですが……、アンケート的には「ま、いんじゃねえの

未経験者向けHTMLとCSSの授業です。基礎的なHTMLタグ、レイアウトを調整するためのCSSを使用して、受講生の皆さんと一緒に作業をしながらWebページを組み立てる実習授業です。架空のカフェ「KUJIRA cafe」のサイト2ページ分を作成します。 ページの作成に使用する写真などは用意しているので、あとはHTMLとCSSを書いてみるだけ。書いて作って、結果を確認したら、「なるほどこういうものなのか」と、おおよそのことは理解できるようになるでしょう。 「はじめてみたいけどなにから手を付けたらよいかわからない」という方は、是非参加してみてください。 この授業の実習内容 HTML ・すべてのページで使われるHTMLを記述する ・見出し、段落、リストを記述する ・リンクを張る ・画像を挿入する CSS ・背景色、文字色を指定する ・背景に画像を指定する ・レイアウトを調整する など ※実習ではこ

コンピュータの言語である「コード」を記述するためには「エディタ」が必要です。 WebデザイナーもHTML＆CSSをはじめとした言語を書いていきます。 Webデザイナーにとって、コーディングそのものが「仕事」ですが、「学び」でもあります。 新しい技術・表現の模索はコーディングから始まることも多いのです。 そして、コードを書く「道具」がエディタということになります。 よい道具の条件は使いやすい機能あることと、育てられること。 お気に入りのエディタは、自分の相棒のようなものです。 この授業では、HTML＆CSSのコーディングを通して、 OS標準のエディタから、Adobe Dreamweaver、Sublime Text2の使い方を学びます。 また、実践的なカスタマイズ方法をご紹介する予定です。 目標は「会話をするようにコーディング」すること！ いっしょに頑張っていきましょう！

WEBデザインでPhotoshopを使っている皆さん、こんなことはありませんか？ •印刷物も合わせて提案した案件ができた（全部一人でやるかも…） •クライアントから印刷物作成も頼まれた（安すぎて他に頼めないかも…） などなど…ありがちだと思います。 WEBデザインからPhotoshopを使い始めた方でも、これから印刷に関わる仕事が出てくることもあるかもしれません。 初めてやるけど大丈夫かな…印刷用の画像を作るのは難しいのでは…と思った方にこそお伝えしたいことがあります。 実は、印刷用の画像データの「キモ」を押さえておけば、今までやってきたRGB補正の経験は全てそのまま使えるのです!! 今回はその「キモ」についてじっくり説明します。 Photoshopでの操作は必要最小限に留めます。最新バージョンも必要ありません。 TAC値（総インキ量）、グレーバランス、プロファイル、印刷用シャープネス、網

この授業は実際に手を動かしながら、つまりPhotoshopを起動して、受講者の皆様にも実際に制作をして頂くタイプの授業となります（実習は2週目、3週目のみ）。 Webデザインに興味はあるけどやったことはないという方はもちろん、実際の作業を見ることで、既にWebデザイナーとして活躍されている方も新しい発見があるかもしれません。 授業は全3回で構成します。 1週目はWebデザインの基礎知識についてお話しします。2週目は、WebデザインのためのPhotoshopの環境設定と基本操作、Webボタンの制作となり、3週目は広告バナーの制作方法についてお話しします。 PhotoshopによるWebデザインの基本操作は、バナー制作やWebページのデザインカンプ制作はもちろん、iPhoneアプリのデザインなどさまざまな分野で役に立つと思います。ぜひこの機会に身につけておきましょう！

WEBが圧倒的なインフラとなりつつある昨今ですが、素人には理解が難しい・取っつき難い領域の一つに、「サーバ」が挙げられます。 エンジニア以外の人には馴染みのない分野ではありますが、あなたが今利用しているこのschooWEB-campusをはじめ、WEBサービスの全てに「サーバ」が利用されています。 「twitterが落ちている」、「このサイトが繋がりにくい」、「503エラー、と表示されていて、サイトを利用できない」など、サーバに関する問題は、本当に身近に溢れていますが、サーバとはどんなものなのでしょうか？ また、どうしてサーバは“落ちて”しまうのでしょうか？ WEBがもっと普及していくこれからの社会で暮らすためにエンジニア以外の人達にも「サーバの基礎知識」をわかりやすく伝えたい。 可愛いイラストを交えたサーバの入門書を執筆された、女子大生サーバエンジニアのaicoさんを先生にお迎えし、参加

同授業「WEBライティング実習」は、ユーザー参加型にて実施致します。事前に題目に沿った課題を提出することで、当日先生による公開添削を受けることが可能です。詳細は下記【事前課題提出要項】をご覧ください。 ※エントリー多数の場合は、全てを取り上げることが難しくなってしまうことをご了承ください。 ※事前課題を提出しなくとも、もちろん授業に参加可能です。 授業概要 WEBで文字を使ったコミュニケーションが活発に行われる昨今。メール・ブログ・WEB記事など、オンラインで文字を書き、誰かに情報を届ける技術は、ビジネスパーソン必須の技術となりました。その機会はソーシャルメディアの普及により、仕事の場に限らず、プライベートにもどんどん広がっていると言えるでしょう。 ですが、オンラインで掲載する文章の中で、読まれている文章と、そうでないものに二分されているのは紛れもない事実。そして、紙の文章とは違い、オンラ

この授業は実際に手を動かしながら、つまりPhotoshopを起動して、受講者の皆様にも実際に制作をして頂くタイプの授業となります（実習は2週目、3週目のみ）。 Webデザインに興味はあるけどやったことはないという方はもちろん、実際の作業を見ることで、既にWebデザイナーとして活躍されている方も新しい発見があるかもしれません。 授業は全3回で構成します。 1週目はWebデザインの基礎知識についてお話しします。2週目は、WebデザインのためのPhotoshopの環境設定と基本操作、Webボタンの制作となり、3週目は広告バナーの制作方法についてお話しします。 PhotoshopによるWebデザインの基本操作は、バナー制作やWebページのデザインカンプ制作はもちろん、iPhoneアプリのデザインなどさまざまな分野で役に立つと思います。ぜひこの機会に身につけておきましょう！

この授業は実際に手を動かしながら、つまりPhotoshopを起動して、受講者の皆様にも実際に制作をして頂くタイプの授業となります（実習は2週目、3週目のみ）。 Webデザインに興味はあるけどやったことはないという方はもちろん、実際の作業を見ることで、既にWebデザイナーとして活躍されている方も新しい発見があるかもしれません。 授業は全3回で構成します。 1週目はWebデザインの基礎知識についてお話しします。2週目は、WebデザインのためのPhotoshopの環境設定と基本操作、Webボタンの制作となり、3週目は広告バナーの制作方法についてお話しします。 PhotoshopによるWebデザインの基本操作は、バナー制作やWebページのデザインカンプ制作はもちろん、iPhoneアプリのデザインなどさまざまな分野で役に立つと思います。ぜひこの機会に身につけておきましょう！

Webサイトのページ数が多くて、HTMLの管理が大変だったり、クライアント（お客様）が情報を更新したいとおっしゃっていたり、あるいはオリジナルデザインのブログを作りたいと考えているのであれば、WordPressに挑戦してみることをおすすめします。 1回目はWordPressのインストールと使い方 この授業は、全2回となっています。既に、HTMLとCSSがわかる方向けの内容です。 1回目の授業では、まずはご自分のPCにWordPressをインストールする方法について解説します。 なぜレンタルサーバーなどではなく、ご自分のPCにインストールするかというと、WordPressテーマなどを制作する際、ご自分のPC上で編集したほうが素早く編集できるうえ、制作途中のWordPressサイトを他の方に見られることもありません。 2回目はWordPressテーマ制作 2回目の授業では、ごく一般的なHTML

「WordPress」って最近よく聞くけど、どんなものなのかよくわからない。 ホームページをこれから作りたい、もしくはいまあるホームページをリニューアルしたい。 サイトの運用は自分でできるようにして、いつでも更新できるようにしたい。 できれば、スマートフォン対応もしたいけど、できるだけ費用はおさえて、サイトを作りたい。 そんな方にぜひ講義に参加いただければと思います。 「WordPress」はWeb全体の18％をカバーするにまで普及しているCMSです。 そもそもCMS(コンテンツマネジメントシステム)とは、どういうものなのか？ 「WordPress」について、初心者を対象になるべくわかりやすく解説します。

自分の仕事やお店の玄関口となるサイトが欲しいと思った事はありませんか？ でも難しいコーディングはちょっと…どころじゃなく苦手。 この授業ではNOコーディングでWordPressを使って基本的かつ汎用的に使えるポートフォリオサイトを作っていきますので、コーディングが苦手でも安心の授業内容となっています。 ターゲットは個人商店や個人のデザイナーやイラストレーター、他にも自分のスキルの玄関口が欲しいと思った方。 ポートフォリオサイトとは自分のプロフィールや情報を掲載して、仕事やお店の玄関口となるサイト。 この授業では自分のスキルや伝えたい事をまとめ、ポートフォリオサイトに必要なものや構造をさくっとさらっと理解する事からはじめます。 ポートフォリオサイトを作るという事は自己分析を元に自分の営業ツールを作る事です。 この授業を受けると営業ツールであるポートフォリオサイトを作る以外に、自分のスキルや伝

スマートフォン、タブレットなどのスマートデバイスの爆発的な普及により、Webサイトのマルチデバイス対応が求められてます。そのひとつの手法としてレスポンシブWebデザインが注目されています。 この授業では、レスポンシブWebデザインの概要と、注目されている理由、その基本的な実装方法について話します。また実際にハンズオンで簡単なレスポンシブWebデザインのサイトを制作します。実際に手を動かして制作することでより理解が深まります。 レスポンシブWebデザインは比較的新しい手法であり、またレイアウトが可変で複数のデバイスに対応するため、今までのサイト制作とは大きく考え方や制作のフローを変える必要があります。またデバイスの画面サイズや回線速度などの違いを様々な技術を組み合わせて補う工夫をする必要もあります。 このように学ぶことは多岐に渡りますが、まずは入り口として基本的な部分を学んでレスポンシブWe

自分の仕事やお店の玄関口となるサイトが欲しいと思った事はありませんか？ でも難しいコーディングはちょっと…どころじゃなく苦手。 この授業ではNOコーディングでWordPressを使って基本的かつ汎用的に使えるポートフォリオサイトを作っていきますので、コーディングが苦手でも安心の授業内容となっています。 ターゲットは個人商店や個人のデザイナーやイラストレーター、他にも自分のスキルの玄関口が欲しいと思った方。 ポートフォリオサイトとは自分のプロフィールや情報を掲載して、仕事やお店の玄関口となるサイト。 この授業では自分のスキルや伝えたい事をまとめ、ポートフォリオサイトに必要なものや構造をさくっとさらっと理解する事からはじめます。 ポートフォリオサイトを作るという事は自己分析を元に自分の営業ツールを作る事です。 この授業を受けると営業ツールであるポートフォリオサイトを作る以外に、自分のスキルや伝

Webデザインのみならずさまざまなクリエイティブワークで必須のアプリとして不動の地位を確立しているPhotoshopですが、そのあまりにも高機能・多機能な振る舞いに、なんとなく使っているという方も多いのではないでしょうか？ 今回の授業では、作業をより効率化し時間短縮につながるポイントを、実際のワークフローに沿ったかたちで進めていきます。 たとえば、制作をはじめる前の環境設定一つとってみても、掘り下げるべきポイントがあります。 まずは、Webデザインに適した設定を行ってから。そこからが今回の授業のスタートです！ 次にページのフォーマットづくり。ここではいろんなガイド機能を利用します。 そして、実際のデザインワークではブラシやマスクの活用、グラフィックパーツの使い回しなど。 デザインが終わればいよいよ画像の書き出しです。こちらもいろんな機能やツールを使った方法を見てみましょう。 また、Phot

WordPressは、テーマを自由に作ることができるのが魅力です。 しかし、PHPに不慣れだと、なにから手をつけたらよいのか分かりにくい部分も。 この講座では、インストール直後の WordPressからスタートしてリアルタイムで、 企業サイトを構築、サーバーへの公開までの作業を紹介していきます。 ご参加者の質問やリクエストで、作る内容をその場で変えることも？ たくさんのご質問をお待ちしております。 たにぐち まこと 株式会社エイチツーオー・スペース 代表取締役 「ちゃんとWeb」をコーポレートテーマに、Web標準に準拠したメンテナンスしやすいWebサイトを「ちゃんと」作ることを目指したWeb制作会社。 WordPressを利用したサイト制作や、スマートデバイス向けサイトの制作、PHPやJavaScriptによる開発を得意とする。 また、CSS Niteや Word Campでの講演や著書な

WordPressを使ってサイト構築してみたいけど、超初心者だからなにから手をつけていいかわからない。 そんな方のために、「WordPressの教科書2」を使って、授業に参加する皆さんが開発環境の構築と、 サイトの実制作を一緒にやりましょう。関係各位の協力のもと、書籍の一部 を事前課題として公開しています。 WordPressの概要を全く分かっていないという方は、以前の授業「WordPressとは何か？を基礎の基礎から理解する」を受講しておくことをオススメします。 全２回（第１回：開発環境構築編,第２回：実制作編）の授業を通して、サンプルブログサイトの制作を一緒に体験し、制作スキルを取得することが可能です。 ※同授業で制作するサイトは、「WordPressの教科書2」で制作する「ジャカルタで働く社長のブログ」を簡易にしたものになります。オリジナルのものですので、そのまま 個人・法人問わず、

WordPressを使ってサイト構築してみたいけど、超初心者だからなにから手をつけていいかわからない。 そんな方のために、「WordPressの教科書2」を使って、授業に参加する皆さんが開発環境の構築と、 サイトの実制作を一緒にやりましょう。関係各位の協力のもと、書籍の一部 を事前課題として公開しています。 WordPressの概要を全く分かっていないという方は、以前の授業「WordPressとは何か？を基礎の基礎から理解する」を受講しておくことをオススメします。 全２回（第１回：開発環境構築編,第２回：実制作編）の授業を通して、サンプルブログサイトの制作を一緒に体験し、制作スキルを取得することが可能です。 同授業では「WordPressの教科書2」で採用している開発環境と同じものを利用します。 これらは、学習用途であれば「無料」で使え、「市場シェア」が一定以上あり、「日本語対応」があると

現在、Web のフロントにおけるインタラクティブな動きのほとんどは JavaScript で実装されています。 例えばちょっとしたマウスオーバーのアクションや、カルーセル、モーダルウィンドウなど、皆さんが普段目にするほとんどの動的なエフェクトは JavaScript です。 一般化した JavaScript によって、 JavaScript を使いこなせるエンジニアの需要は高まる一方ですが、プログラミングの経験が無い人には少しむずかしいですよね。 しかし、今回お話する jQuery というフレームワークを利用すれば、まるでCSSを書くようにシンプルな記述方法で、パワフルなJavaScriptの機能を利用できるようになります。 この講座を受ければ、jQuery の基本的なエフェクトや構文などが理解できるようになっています。 これから jQuery を覚える人の一助になれば幸いです！

Webページは写真やロゴなどの「ビジュアル」と、HTMLやCSSといった「コード」で成り立っています。 この授業では、カフェ店舗のWebサイトをテーマにして下記の流れで進めていきます。 １．サイトの目的を考える ２．ビジュアルとコードを見つめる ２．ビジュアルイメージを練る ３．レイアウトを構成する ４．HTMLを設計する ５．CSSで飾る ６．Javascriptで演出する ※写真・テキストなどの原稿はダウンロードいただけるよう、ご用意します ブログやfacebookなど、既に出来上がっているWebを活用するのも楽しいことですが、まっさらな状態から制作することでWebへの理解が深まり、Webをつくる喜びを感じられるはずです。 Web業界は常に過渡期の連続ですが、変わらない技術と考え方が存在します。 それは試行錯誤する能力であり、スポーツ選手にとっての体幹です。 これらが身につけば、新しい