WEBデザインクラスやフォトショップクラスのレイアウト実践でお話ししている「3分割法」。
画面を3つに割って、それらの交点にポイントを置きましょうねと言うあれです。あれ。
その3分割法の分かりやすい説明がありました。英語ですけど、なんとなく分かってもらえると思います。
http://giancarlovolpe.tumblr.com/post/31936449650/i-did-some-compositional-how-tos-in-my-early
デザインって実は、こんな感じで知っておくと、失敗しない＆良いデザインになる。と言うポイントがいくつかあるんですよ！
Tribes20スクールでは、ソフトの操作方法を覚えるのは当たり前。それよりも重要な事は、そのソフトを使って「何を？どう？作るのか」にポイントを置いた授業を行っています。
デザインは難しい、自分には向いていないと言う人に是非体験して欲しいです。
それではまた！
12/8に開催した、講師久保がガチでコーディングをするイベント「htmlライブコーディング」。生徒さん、卒業生のみならず、同業のプロからも「勉強になったよ！」とちらほらお喜びの声をいただいており、感謝感激です。
教室での実演とUstreamによるライブ中継だけだったので、都合悪く見られなかった人の為に、しおり先生がまとめてくれました！
—
Photoshopでのトリミング - ショートカット登録しておくと楽！
「イメージ」メニューのトリミング機能の事ですね。画像を無駄無く切り取ってくれるwebクリエイター必須の機能です。初期状態ではショートカットが無いので、僕はショートカットをカスタマイズして使っています。
HTML5+CSS3でのPNG画像 - 透過PNG使えて便利〜
特に背景色が一色じゃない場合などに役立ちます。
複数の背景画像の設定（CSS3）- 先に記述してある物が上に表示される、さらにrepeatなどの設定もそれぞれ設定できる
こんな感じです↓
background-image:
url(../img/index/back-water.png),
url(../img/index/back.png);
この場合、先に書いた”back-water.png”が上のレイヤーとして表示されます。CSS3新機能です。
Dreamweaverでのソースコード表示の文字サイズ - 設定で変えられる（大きくできる）
「環境設定」「フォント」から変更可能です。
ZEN cordingを使うと、DIVのレイアウト構造作る時すごく速い
Zen Cordingはコードに慣れて来たら必須ですね。
グロバールナビゲーションは箇条書き（ul/li）を使用 - 文書の構造が最優先
授業では口酸っぱく言っている事ですね。デザイン（見た目）よりも構造を優先させて、後で飾り付けします。
ドリで「px」と入力する時 - スニペットで登録しとくと激速い！
よく入力する”px;”や”#fff”なんかはスニペットに登録すると早い上に入力ミスも減ってお得です。ショートカットも適用できます。
本文部分のHTML構造分け（HTML5） - 記事全体がarticle、その中にsectionを複数作る
html5ではdivの代わりにheader/article/section/aside/nav/footerなども利用出来る様になりました。
「箱」にも意味が出来た。と言うことですね。
ドリのショートカット - command+1でh1、command+2でh2！
よく使いますし、覚えやすいですね！ちなみにpはctrl(cmd)+shift+P！
1pxの線を薄めに表示したい - 背景色と線の色の中間色にしてあげると◎
テクニックと言うよりhtmlコーディングするときの心構えですね。
デザインの意図をくむ事と、ユーザーの使い勝手を考える「攻め」のコーディングを心がけましょう！
DIVの最小限の高さを指定しておきたい場合 - min-heightを指定
webでは高さが変わる可能性の方が多いので、heightよりもmin-heightの方が多用されるかもしれません。
min-widthなんてのもありますが、こちらはほぼ使用しません。
幅小さめのボックスがfloatで並ぶ時 - 2つずつクラス分けると、後の管理が面倒になる場合あり 共通にするのが◎
できるだけclassは作らずに、まとめられる物はまとめる！整理するのがあらゆる面で吉！
生徒さんにはおなじみの、いつも授業で言っている事ですね！
—
とまあ、よーしゃべったなと言う感じですね。こうして改めて見てみると…。
未経験の方からすると、難しく、敷居が高く聞こえるかもしれませんが、一段一段階段を上って行くと、ちゃーんと分かってきますので、ご安心を。
それではまた！
（久保）
htmlライブコーディング終了しました！
教室に来てくださった皆さん、Ustreamで見てくださった皆さん、本当にありがとうございました。
html5/css3の基礎知識とweb制作のあれこれを、実制作を見てもらいながらお話しました。
2時間、コーディングしながらしゃべりっぱなしだったんで疲れたけど、とても充実した楽しい時間でした！
少しでも現場の雰囲気とプロのクオリティの高さを感じてもらえたなら嬉しいです。今後も少しずつWeb制作最前線の技術をご披露する場を設けて行こうと思います。
今回参加出来なかった皆さんも是非次回は参加してくださいね。今度は飲み会も込みだ！
本当にありがとうございましたー！！
僕は人をお教えするに当たって、ずっと心がけている事があって、必ず作る事の「出来る」感と「楽しさ」を知ってもらおうと思っています。
デザインと言うと未経験の方にとっては、得体の知れない、選ばれた人だけが出来る特殊能力だと誤解されている事が多くあります。（時々それは「センス」と言う曖昧な言葉でごまかされていたりするんですが。）
でもデザインって決して「センス」のある人だけのものではなくて、気軽にファッションやインテリアを楽しむ様に、もっと身近で誰もが楽しめて、誰もが「出来る」ものだと思っています。
その為には最低限のマナーや手順があって、そう言ったものをお教えしながら、その上で、その方それぞれの個性を出して行けば良いのだと考えています。
そしてこの楽しさを知ってもらう為に、僕らはデザインや制作を楽しんで、生徒の皆さんにこの楽しさを知ってもらえたらなと思います。
デザイナーの山中俊治さんがtwitterでつぶやいていた事を読んで、ふとそんなことを考えました。
授業で伝えなければならないのは、知識やスキル以上に、知識やスキルを手に入れる喜びなのだと思う。それは、教える側が楽しんでいなければ決して伝わらない。
— 山中俊治 Shunji Yamanakaさん (@Yam_eye) 12月 4, 2012
久保
イラストレータークラス、フォトショップクラス、WEBデザインクラス、HTMLコーダークラスのカリキュラムがバージョンアップ。
より分かりやすい教材と、最新のテクニックを盛り込んで一新されました。これからWEB業界を志す方に更なる手助けをさせていただきます！
上記カリキュラム変更に伴い、12月1日から受講規約の一部と受講料金の一部が改訂となりました。
無料説明会・体験クラスなどお気軽にお問い合わせください。
Tribes20スクールの講師、久保が実際の仕事風景をお見せします。普段授業でお教えしているツールやテクニックを駆使しながら、プロの思考法、弊社のクオリティへのこだわり、仕事の速度感など、ハイレベルな技術と本気を見てもらえると思います。
受講生・卒業生の方にとっては、良い復習になると思います。
これから受講を考えている方にとっても、webを制作する雰囲気などを知ってもらえると思います。
—
内容はすでにあるデザインをhtml5/css3を使って形にして行きます。細部にわたって、seoやアクセシビリティに配慮したコーディングを行います。
当日は講師が操作する画面を閲覧してもらいながら、講師からの説明を聞いてもらう形を予定しています。
参加希望の方は kubo「アットマーク」tribes20.com までご予約を。参加者多数の場合は抽選となります。参加者いない場合はやりません！
開催します。
前に書いたこの記事のライブコーディング（デザインデータを基にHTMLを制作します）を12/8（土）13時〜試験的に実施してみようかと思います。
プロが実際の案件で制作を行う姿を見てもらう事で、技術面だけでなく、ハード、ソフトどんなものを活用しているのか？どれぐらいの速度なのか？どういう思考回路が働いているのか？などを実例を見てもらいながら、「盗んで」もらう形にしようと思います。
受講生・卒業生の希望される方には、あらかじめデザインデータなどをお見せするので、自分だったらどうするかな？とシミュレーションしておいてもらって、当日プロの方法を見てもらうと勉強になるかも知れません。
教室でやるのか？Ustream使うのか？などなど、詳細は追って決まり次第、このブログ、Tribes20オフィシャルFacebookページなどで告知いたします。
今日とあるお仕事のHTMLを作る作業（コーディング）していた時に思いつきました。
実際こうしてプロがゼロからデザインなり、コーディングをしている所を見てもらうだけでも、勉強中の皆さんには価値がある事なのかもしれないと！
実際の現場でのテクニックはこれでもかというほど全部授業でお教えしているので、目新しいテクニックとかって無いと思うんですが、それでもプロがどれぐらいの速度で作るのか？どういう思考を経て作業が進むのか？もしくは微妙なこだわりや裏技…。
そう言うものを一度でも目にしてもらうと、それだけで気づいてもらえる事もあるんじゃないだろうか！いや。多分ある！あるはず！
という思いつきにより、僕の仕事を見る会を近々やろうかと。ただし仕事ベースなので、その作業がある時に限るという感じ。うまく制作のタイミングが合えば、どこかの土曜日午後あたりで計画を練ろうかと思います。
（久保）
9/6〜13日の一週間、アメリカはニューヨークを旅してきました。
受講生の皆さんには、期間中お休みをさせていただくなど、ご迷惑をおかけしました。皆さんが気持ちよく送り出して下さったおかげで、久しぶりのリフレッシュと、新たな刺激をたくさんもらって帰ってきましたよー。
ニューヨークでは、自由の女神や、マンハッタンの夜景など、ベタベタな観光地も見つつ、MOMA、ハイライン、ブルックリンなど新旧アートエリアも覗き見してきました。
個人的に一番感動したのはメトロポリタンミュージアム。最初にある古代エジプトエリアだけで、日本の美術館一つ分！現代アートエリアも、ヨーロッパ絵画エリアもすべて美術館一つ分のボリューム！
さらっとゴッホの「自画像」と「星月夜」があったり、一部屋全部大好きなモネだったり、あっちこっちに「あ！ここにあったか！」状態の連続。
とても1日で見て回れる場所ではなかったですw
それとニューヨークは人が素敵！ちょっと地図を開くと、必ず誰かがメイアイヘルプユーしてくれますw それに、英語が多少分からなくてもちっとも嫌な顔をせずに付き合ってくれます。
移民や観光客も多く、多人種の中で生きている事、911という大変な災禍を乗り越えた事で、そうした人と人の結びつきがより強まったと、現地の友人が説明してくれました。
ということで、ニューヨークで得たこのパワーをぜひ皆さんに還元すべくがんばって参ります。まだ時差ぼけが抜けませんが、がんがん行きまっせ！！
（クボ）
このブログをご覧のみなさん初めまして。
Tribes20スクールに新たな先生が！
現役WEBデザイナー、実績豊富な敏腕クリエイターです。ちなみに女性です。これまで男だらけでむっさい感じだったので、女性の受講生の方にもうれしいご報告ですね（w
実務での経験と、「教える」という技術には少し違いがあります。新先生も「教える」部分ではまだまだ見習いですが、期待の逸材です。ご期待ください。（久保）
以下、新先生Mからのご挨拶です。
—
Ｍと申します。WEBデザインスクールの新講師（見習い中）です！
授業の空き時間にブログ更新の任を仰せつかりました、いきなりのIN PUBLIC・・・緊張します。
講師の話をいただいてから、どんな生徒さんがみえるのかと楽しみにやって来ました。
これまでにお会いしたみなさんプロフィールも様々、スクールで学ぶ目的も様々・・・共通して感じるのは、各々試行錯誤しながら「作ること」を楽しまれているということです。
デザインすることや何かを作ることは、楽しいことですよね〜（時に苦しくても！）
デザインや画像処理のソフトウェアがこんなにも発達したのはここ数十年のことですが、コンピュータやインターネットを活用することでまだまだもっと世の中に素敵なデザインを送り出したり、ムーブメントを起こせるのではないかと思っています。
私自身日々精進する身ですが、今までの経験を活かして生徒さんの学ぶ手伝いができればいいなと思います。
そしてたくさん刺激を受けたいと思っています。どうぞよろしくお願いします！
