経営脳と技術脳、を支える脳

脳をイメージすると「頭の切替」スムーズになるかも…。
By: tellatic

起業家として動いている時と、
技術職とでは、脳の働き方が
全然違うなと実感しています。

ちょっと前までは完全な「技術脳」でしたが、
『金持ち父さん貧乏父さん』を読んで
個人事業を起こしてからは、
「経営脳」に、技術脳が脅かされています。

どういうことかと言うと、
プログミングやコーディングのサービスを
提供すべく働いていた脳の『時間』が、
経営脳に奪われていっている、ということです。

マーケティングや、売る仕組みを
考えるのはとても楽しいです
(そちらに時間をかけるほど稼げるので…)。
その分、技術脳の時間がめっきり減り、
いざ、今日はプログラミングだ、と
取り組もうとしてもなかなか実行できなくなる。
これでは、あぶはちとらず、になりかねません。

ビジネスを自分一人でやろうとするのは無理があります。
大きなことをしようとするほど、
「チーム」が必要になる、というのが実感として
分かってきました。いろいろな分野の、
エキスパートの力が必要です。

今は経営脳と技術脳を両立させるための脳、
「マネジメント脳」が必要なんだな、という
気づきをえました。まず自分を管理できなくては、
チームは作れない、と。

技術脳だけの時は、経営脳の考え方は
とっつきにくかったものですが、
『金持ち父さん貧乏父さん』を読んで
勉強する意欲を得て、今では面白いと
考えるようになっています。
マネジメント脳も、とっつきにくいイメージですが、
こうして気づきをえると、勉強「したい」という
意欲が生まれました。

文章を書いて、まとめるということは本当に
大事ですね。ほかの誰でもない、自分の
考えをまとめて、前に進むことができました。

マネジメントといえば、

でしょうか。
また図書館で模索してみます。

コーダーからホームページのカンプを制作する デザイナーさんへのお願い

デザインと、プログラミング
By: Yandle

ホームページの制作は、大きなサイト/サービスになるほど、
比例して、たくさんの人の力が必要になります。

デザインだけでも、HTMLだけでも、
人気のあるホームページは作ることができません。
関わる人すべてが、それぞれの出来ることを確認しながら
開発という工程を進めていく必要があります。

私はコーダー兼、PHPやRubyなどのサーバサイドのスクリプトや、
JavaScript、jQueryを主に使ってシステム開発をこなすウェブプログラマです。

サイトを作っていく時に共同で作業するデザイナーさんは、
紙の媒体を主力において活躍されている人が多いです。

その際、ウェブと紙とで作品の作り方が違うことを説明することが
ありますが、今後も毎回同じことを繰り返すのも手間なので、
こういう覚書を作ってみました。
ご意見のある方、ぜひコメントをお寄せください。

まず、デザイナーとコーダーの役割は、
大きく分けると以下のようになると思います。

デザイナーの役割
・サイトの運営方針に沿ったデザインの制作
・サイトのテンプレートの制作
(タイトル、ヘッダー、フッター。サイト全体の世界観の統一)
・ユーザビリティ、可読性を考慮したインターフェースの構築

コーダーの役割
・デザイナーが制作したデザインを活かしたまま、
検索エンジン向けにホームページの構造部分と最適化し、
デザイン部分を別ファイル(スタイルシート)にまとめて切り離す
・制作後に検索エンジン向けのサイトマップを作成する
※他にもプログラム的な業務を行うこともあります。

以下はコーダーの視点から、デザイナーさんに
おさえてもらいたい要点をまとめたものです。

<目次>

 

1.ページの幅は950pxが基本

Yahoo!Japanやauをはじめ、
有名サイトのページの幅のトレンドは、
現在(2012年前後)950pxとなっています(960pxのサイトもあります)。

外枠や影を付ける場合は、その太さも考慮して、
幅を決めてください。

参考サイト
「サイトの幅」
http://megane9988.com/?page_id=277

 

2.読ませる文章はプレーンテキスト

ホームページでは、タイトルやバナーをのぞいた、
いわゆる、ユーザーに「読ませる」文章は、
画像ではなく、テキストデータにします。

デザインする時は、画像とテキストデータを
見分けられるよう、装飾なしのプレーンテキストを
使用してください。

※プレーンテキストの出力は、Illustratorでは
できないようです。一般的に、ウェブデザインは
Photoshopか、業界スタンダードの「FireWorks」
を使用します。
Photoshpでは、プレーンテキストをデザインに
組み込むことができます。
下記サイトを参考にして下さい。

・参考サイト
「IllustratorからPhotoshopヘファイルの書き出し」
http://dis.ne.jp/blog/topics/2900.html

画像ではなく、プレーンテキストを用いる理由は、
「見る人がブラウザのメニューを使ってサイズを調整できる」
「検索エンジンは、画像を無視し、テキストを読む」
「コピペで使いまわせるので、ツイッターやFacebook等で
情報が広められやすい」といった利点があげられます。

コーディングという作業を行えば、
画像にも文字情報を与えることが可能になりますが、
ページの見出し、メニュー、コンテンツの本文は、
なるべくプレーンテキストでデザインすることを
基本にして下さい。特に見出しは、検索エンジンが最も
重要視する要素なのでプレーンテキストが推奨されます。

・参考サイト
「見出しをCSSでシンプルに装飾するtips」
http://designblog.ecstudio.jp/htmlcss/css-header-tips.html

「見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ」
http://tinyurl.com/6om5999

ページの世界観を構築するため、メニューや見出しに
凝ることは大切ですが、ユーザビリティ、サイトの
売上向上といった要素も考慮してデザインできるよう、
自分なりのルールを作ってみてください。

 

3.コーダーに渡すデータ形式はPNG

ウェブ業界標準の画像作成ソフト「FireWorks」は
Adobeファミリーのソフトであるため、
DTPで使われるaiファイルやeps、psdも読み込めます。
ただ、カンプや、大きなイメージ画像の場合は、
ページを軽量化するため、パーツごとに細かく分割して
書き出します。
この時、Fireworksのスタンダードな保存形式である
「PNG」だとスライスと呼ばれる書き出しの作業を効率よく行え、
時間を短縮することができます。管理も大変簡便です。
要素が多いカンプほど、書き出しに時間がかかるので、
コーダーにデータを渡す時はPNGでお願いします。

 

4.カラーはRGBモード

DTPは印刷のためCMYKモードでデザインを行いますが、
ウェブはモニタ上で表示するため、RGBモードを使用しています。
グラデーションを使った時に、特に違いが顕著に
表れます(CMYKよりRGBは色数が多いため)。
制作の際には、色数のモードに注意してください。

・参考サイト
「WEBクリエイターはCMYKに要注意!」
http://yourcolor.seesaa.net/article/109894957.html

 

5.フォントはラスタライズするかフォントデータを添付

DTP業界でもおなじみだと思いますが、インストール
されていないフォントの入っているデータを受け取った場合、
いわゆる「代替フォント」に置き換わってしまいます。
データを送付する前にラスタライズで画像にしてしまうか、
フォントデータも一緒に添付するようにしてください。

 

6.技術的に可能か、疑問に思ったらまずはコーダーに相談

ウェブのデザインの基本は、「表組み」と考えてください。
ブロックを組み合わせていくイメージです。
苦手なのは、「要素の重ね合わせ」です(不可能ではありませんが)。

ウェブでは、インターネット・エクスプローラをはじめ、
FireFox、Safari、Chromeとさまざまなブラウザがあり、
それぞれ、微妙に表示方法が異なっていて、
規格が統一されていません。
たいていのデザインは、ウェブページにできますが、
複雑になるほど、作業工程が増えていき、時間と費用がかかります。
疑問に感じることがあれば、作業の前にコーダーに相談して下さい。

 

資料:ブラウザについて

Firefox、Safari、Chromeは自動的に最新バージョンに
更新される仕組みなので、それぞれの最新バージョンに合わせての
コーディングが必要になります。

インターネット・エクスプローラ(IE)は、複数のバージョンが
存在し、それぞれ、独自のバグを抱えているため、
長い間コーダーの悩みの種となっていました。
2012年のはじめから、マイクロソフトがIEの自動アップデートを
実施していることから、現在はバージョン8と9のみに対応させる
風潮になりつつあります。
※なお、IE6については既にメーカーサポート外になっています。
2010年あたりから、Yahooをはじめ、Google、YouTube、Facebookも
サポート外と明言しています。…が、それでも6と7を使う人は
なかなか減りませんでした。

・参考サイト
「IE6の“葬儀”行われる Microsoftから献花も」
http://www.itmedia.co.jp/news/articles/1003/08/news030.html

2011年まで、IEはバージョン6、7、8、9を使用するユーザーが
多数存在していました。
6と7が、バグの巣窟で、HTMLの規格通りにコーディングが
できないことが大変多く、セキュリティも問題視されていました。
2012年より、WindowsXPとVistaはIEをバージョン8に、
Windows7はバージョン9に自動的にアップデートされることに
なりました。

・参考サイト
「Internet Explorer の自動アップグレード、日本でも始まる」
http://news.mynavi.jp/news/2012/03/30/159/index.html

ユーザーが自動アップデートを拒むこともできるため、
100%の切り替えが行われたと断言することはできませんが、
実際、2012年に入ってから、IE6と7のユーザはめっきり減ってきています。

・参考サイト
「アメリカも IE6 シェア 1% サークルに仲間入り」
http://hyper-text.org/archives/2012/01/ie6_below_1percent_usa.shtml

2012年に入ってからは、バージョン6と7に対応させる場合、
10%以上の料金を追加するという会社も出てきました。
(「株式会社まぼろし IE6, 7対応費用に関しまして」
http://maboroshi.biz/news/article004.html

2012年中には、Windows8(IE10)も登場しますので、
6と7についてはサポート外に踏み切ってもいい時期だと思います。
システム系のサービスを構築する際には、推奨環境を明記します。

ウェブのデザインでは、制作後、しばらく時間をおいたり、
別のPCで見た時に、デザインが崩れていることが見つかり、
よく問題になります。たいていは、ブラウザの違いからくるものです。
新しいブラウザが登場したり、古いブラウザでのみ確認していると
デザインが崩れるケースが多いので注意が必要です。

形からとは言うものの

やっと屋号付きの口座ができます。あと1週間ほどで
口座を開設すると、銀行から連絡がありました。
昨日はちゃんとした印刷所で刷ってもらった名刺が届きました。

まだ事業者として本格的に営業をかけられる状態ではありません。
形からとは言うものの、準備が整ってくると正直嬉しいです。

周りにもフリーになって東京に行くという人がいますが、
彼らは青色申告の話をしても、のってきません。
まず、独立して、自分の名前で活動したくてたまらないといった感じです。
人それぞれだなあと思いますが、少し心配です。

僕は「金持ち父さん」の本を読んだので、
システム、法律、キャッシュフローの仕組みを作って、
それらを管理できるだけの体制が整うまでは、
事業者として本格的な営業活動には入りません。
従業員として働いてきた長い経験からも、
ビジネスは、始める前に形作られると考えています。
当分は「金持ち父さん」の流儀でいってみるつもりです。

まだ完全に活動していないのに、知り合いの紹介で
2、3件仕事が入ってくると、もう限界になっている始末。
自分の「ビジネス」が、まだ形になっていない証拠です。
ロバート・キヨサキが言うところの、「B-Iトライアングル」を
早く完成させたいです。

青色申告と前後して、地元の会計士さんに相談に行く予定です。
多分、春先になると思いますが、ファイナンシャル・プランナーの方を
見つけて、定年までのお金の計画を立てる予定です。

やることが山積みで忙しいですが、困難だとか、険しい道のり、
というほどでもないと思います。本当に、知っているか、知らないか。
やるか、やらないかだけの違いです。
大きな事業にはならないとしても、この道を進んでいくことで
得られるメリットは計り知れません。
今はとにかく時間がほしいです。
5年早く、「金持ち父さん」に出会えていたらなーと思わない日は
ありません。

8月に開業届をしてまだ半年にもなっていないのに、
ずいぶん環境が変わりました。新しい友人もできました。
今年の8月、そして来年のお正月と、節目節目にどんな気持ちで
迎えているのか。
従業員として生きてきたこれまでの人生とは違い、頑張ったぶん、
自分の将来が楽しみになっていくということが、
ファイナンシャル・リテラシーを学ぶことで与えられる、
何よりのご褒美だと思います。