この技術は

質問

初めまして。
紙媒体のデザインを5年程しております。
1年程前から若干WEBの仕事も手をつけて
HTML,CSSあたりはなんとか理解出来る様になりました。

そこですごいポートフォリオサイトをまとめサイトで見つけたのですが
zin-ic.com
センスがいるのは前提としまして
このような動きのあるデザインはどういった技術が必要ですか？

回答No.7

Glory_777 · ベストアンサー

No.6のものです。

30年前というと、コンピュータにとっては黎明期です。当時はマイコンとかミニコンなど
コンピュータの処理能力で名前をつけていました。

本当に日本と言う国がチップの製造に踏み切ったのは、電話交換機の機械化が発端です。
ですので、最も古い国産の32ビットCPUは、今のNTTが開発を依頼しました。
これを受けてOSやアセンブラ、コンパイラなど今では一般の人も馴染んでいる高度な
制御技術も日本独自の自作をしていたのです。

ここではHDからIO制御装置、あらゆる装置やソフトを自作していたようです。
もちろんこれらは大手電機メーカーが請け負っています。

いまコンピュータ系で有名な古参電機メーカーは、この技術を使って自社製品を作り、
それが今日の日本の産業に成っています。

ですので、通信とコンピュータだけは総務省が主導しています。

電話交換機を主体とした通信キャリアのソフトウェアやハードウェアの発注規模は全体で
3兆円近くになっていました。

これはIT系のソフトウェア発注総額に近く、お金の出所が全てここになります。

ここから大手電機メーカーが受注し、子会社に再発注をし、最後は学生がアルバイトで仕事
をするというヒエラルキーが出来ていました。

いまでもこの流れは強く、
一見してプログラムは自由に思えても、
お金を稼ぐ場合は、クライアントのクライアント、そのクライアントの好みが影響します。

プログラムコードをかけても、食べていけない人が多いのは、この経緯を知らないからです。

時代が少し進歩し、日本ではゲーム業界が立ち上がります。

ここには自由を求めてコードを書く多くのプロがラマーが集まり、別のグループが出来ます。
今現在では、パチンコ業界に流れているようです。

いずれにしても、大人数で仕事をする以上、これを纏め上げるボスの力量が大事。
ソフトウェア技術よりも、顧客志向であることと、計画性と論理性を武器にもつ人が上に立ちます。

いま多様な言語が出ておりますが、
これらの発祥に関して、さきほどあげた出身業界があります。

通信業界のトップやそこと共闘した大手電機メーカーのトップの好みは、
当時の花形であるIBMであり、マイクロソフトがIBMを裏切ったことで未だに良く思っていません。

対抗するための措置として、SunマイクロシステムのハードウェアやOSを良く購入していました。
最近では、Javaを開発したSunを擁護し、Javaをi-modeに採用したりしています。

時代の趨勢が変わっても、こうした妄執がいまだに残っているのと、
海外でのマイクロソフト独占阻止の流れと合流し、LinuxとJava系の技術者を擁護していたのです。

これは経済が活況であれば問題ないのですが、
そうでないならば、囚われずコストと生産性で評価すべきですね。

ところが長らくそうしてきたため、年下の層の技術が偏ってしまい、転進ができないのです。
いまではこのままじゃ駄目だと思いつつも、自分たちにとって良くわからないので採用できない。
そうした状態にあるようです。

そこへきてSNSなどIT長者の台頭、Google、I-Phoneなどが独自も武器で世界を席巻し、
日本のソフトウェア産業（通信キャリアから電機メーカーへお金が流れる）のベースロードが枯渇
しはじめたのです。

こうなると、技術は古いわ、お金は無いわで、手も足も出ません。

過去の創始者たちの影響力が弱まり、一般ユーザが好む美しいものが大事にされるようになりました。

マイクロソフト社のビル・ゲイツ氏は、こうした美しいものやコンピュータ操作の快感が大事と
考えており、日本のゲーム業界の思想とかなり近かったそうです。

もちろんアップル社が際立っていましたが。

上記の話は、この業界でまともに仕事をしていれば常識として誰もが知っている話です。

ところが、さきほど述べたように海外の自由な思想が日本にも浸透し、
別の経緯で参入を試みる若いエネルギーが育ってきたのだと思います。

Silverlightが嫌がられるかも、とわたしが気にしたのは、

商売ですから、どこで古い思想のクライアントやもしくはその子分に出会うかわかりませんよ。

そうした場合も想定し、

日本の技術者は、全てにおいて万全に技術を磨いています。

しかし、質問者さんの最初のはなし。

「とんでもなく綺麗。美しい」

と言う感覚が弱く、高い技術力を持っていても、外見でショボイものを作ってしまいます。

勿論、高い技術力を持つ部下は可愛いので、悪く言わないのですが、

「さすがに商売っ気出してくれよ・・・」

と、経営者が諭しています。

ですが、

「技術は必要ないっていうんですか？」

と言う問答になってしまい、馬鹿馬鹿しいですが、変な対立関係が生じています。

ですので、変に技術自慢をしたりすると、昔以上に飯が食えません。

また、海外のビジネスモデルは、クリエイターの囲い込みを行って、

それらのドライバー製品（サーバーやミドルウェア）を高値で企業に売ることです。

非常に簡単な話、

自分がただでソフト開発環境を手に入れても、

納品先の企業は高額のミドルウェアライセンスを支払わないと使用できないかもしれません。

こうした気遣いをしないと、プロではないですね。

Linux系は無料のドライバーで対抗している組織も多く顧客受けしています。

しかし、ソフト開発本来の楽しみを得るには、マイクロソフト社や日本のゲーム業界のほうが

クリエーターよりです。

そのためJavaは企業向け、C＃は一般のご家庭向け、Cは組み込み系でシェアを伸ばしています。

Flashはアドビがあまり大きい勢力ではないので、その他として扱われ、

いつの間にか普及していたという感じです。

Web技術者を目指すならば、まずはWeb系の言語にふれ、全てをやってみるといいでしょう。

以上、ご参考になれば。

お礼

とても詳しくご説明くださり、
感謝です。
興味がさらにわいてきまして、
あれから色々調べ出しました。
ありがとうございます！

回答No.6

Glory_777

No.3のものです。丁寧なお礼を頂き恐縮です。

学生時代からのセミプロ時代も含めると、
プログラムやそれらに付随する管理業務なども含めて、
３０年くらいやってますね。

マシン語と呼ばれる低レベルのコード記述しか出来なかった時代から、
ゲーム開発、通信、SI、と時代と共に続けつつ、プロジェクトマネージメント、
新規事業、など結構いろいろとやりました。

個人で開発するプログラミングから、数千人で数千億の開発をするところまで、
一通り見てきました。

技術者もピンからキリまでｗ

ピンの技術者は、自分でも絵を描いたり、デザインしたりしますよ。
音楽を作る人もいます。

発想を実現するあたりで躓く人はそうそういないので、最初のイメージが大事
になります。

ですので、綺麗だなと思うものに大変憧れます。

質問者さんの自分の手で作りたい、という思いには大変共感しています。

美しいイメージを実現するのに、無骨な技術を学ばないと行けないと言うのが、
この世界の問題ですね。

WebのほうでHTMLが理解できたのならば、あまり深入りせずに、FlashやC#の
方に進むのが良いと思います。

Webデザイナであるならば、Flashを学んでおけば体裁が整うと思いますよ。

イメージ的には、HTML5をやってると言えば、一番かっこいいでしょうけど、
仕事としては、顧客がリスクを感じてしまうので今は静観です。

Silverlight（言語ならばC#）はまだマイナーでしょう。
私はこっちのほうが、扱いやすいので同業には勧めていますが、やはり顧客が
嫌がる場合もあります。

で、Java（最もポピュラーなWeb系技術者のための言語）もそうですが、
殆どどれも似たようなものです。

HTMLと言う記述法は、マークアップ言語と言うものに分類されておりまして、
これが好きな人と、手続き型のプログラム（俗にプログラマーが好む言語）を
好きな人にわかれます。

前者は、だらだらと巻物のように記述します。
中身が平易に伝わるように、テキストとして再利用できるようにします。

後者は、ループ処理（「繰り返し実行して欲しい」と言う記述が主体になる）、
を上手に使って、記述が長くならないように頑張ります。
そして、なるべく中身を見せないように隠蔽し、専用のソフトを使わないと内
容が見れない、と言う仕様が好きですね。

全てのソフトウェア、OSもWebブラウザも、後者の仕組みで作られています。

ですので、HTMLなどからプログラミングへ進む場合は、
ここの違いを念頭においておけば、大丈夫です。

それ以上に面倒なのは、カットアンドトライ（作りながら試す）環境をどうやって
手に入れるかです。この環境が作れれば、「今日からプログラマ」です。

でまあ、実はこれを買うなり、お試しセットをダウンロードするなりして、
この後どうするんだ？と聞いていると、だいたい半年くらいで、一人前になれます。

こうした製品は、メーカーが作っている場合と、有志が集まって作っている場合が
ありまして、後者はただなんですが、マニア向けです。

こっちを採用して開発PJを作る場合も、マニアを雇うことになりますから、
マニア的なコミュニケーションロスによって人的コストが跳ね上がると言う不思議
なことが起きます。

マニアと一般人の間を取り持つ人が余計なお金を持っていく感じになります。

これに付き合った文科系の人（ビジネス系の人とか）は、このあと技術者嫌いになり
技術者パッシングを一生の誓いにするようです。

FlashやマイクロソフトのSilverlightは、メーカーが作っていますので、
有料になりますが（お試しで充分使えるのでタダともいえる）、しっかりと積み上げて
いけるため、自分の技術も進歩しやすいですし、何よりも芸術的センスの高い人に
好まれているため、付き合う層が違ってくると思いますよ。

Flashビルダーと言うのがあるので、これを使う方針でトライしてみてください。
絵のパーツをWeb画面に貼っていくと、その動作をプログラムで記述できます。

わからなくて玉砕してもいいですよ。

そうしたら、次にSilverlightです。
こっちはVisualStudio 2013 Express for web です。
こちらも絵のパーツを貼って行くと、その動作をプログラムで記述できます。

双方共に、ダウンロードからインストール、最初に作るサンプル、
全部ネットで検索したり、聞きながらやるのがいいでしょう。

質問サイトのよさが分かってきますよ。

以上、ご参考になれば。

補足

ご返答ありがとうございます！
また遅くなり申し訳ございません。
こちら何回も返信しようと打ちはじめるのですが、
うまく言葉がまとまらなく。。

30年もされているんですね！
もうベテランのプロの方ですね。
続けられている、それだけで尊敬します。

＞発想を実現するあたりで躓く人はそうそういないので、最初のイメージが大事
＞になります。ですので、綺麗だなと思うものに大変憧れます

そうなのです。デザインを始めるきっかけもそうだったのですが、
単純に見た目がかっこいいものに憧れて始めました。
実際に仕事をする上で自己満足はいけないものというのは
叩き込まれましたので、webを始めるにあたっても
そこから入りたいというのがありました。
将来そのサイトをみて客観的に分析出来る様になればそれが一番かなぁと。

＞WebのほうでHTMLが理解できたのならば、あまり深入りせずに、FlashやC#の
＞方に進むのが良いと思います。

ありがとうごいざます。アドバイス通りそこから始めさせていただきます！
ちなみに僕は自営でして、creative suite CS5に入っているものは作成出来ます！
Flashも入っていますので、その辺りは大丈夫そうです。
ただ勉強しないといけない事はまたデザインとは違うので
がんばりどころですね。

どっちつかずにならない様にというのは肝に銘じます。

＞Silverlight（言語ならばC#）はまだマイナーでしょう。
＞私はこっちのほうが、扱いやすいので同業には勧めていますが、やはり顧客が
＞嫌がる場合もあります。

嫌われる理由というのはどうしてでしょうか？
普及していない分、エンドユーザーが見る時に
プラグインを必要とする作業の一手間があるから、等ですか？

本当にどう質問していいかもわからず、なかなかお返事で来ませんでした。
ここまで丁寧にご回答いただいたからには
さらにやる気がでてきました。
本当にありがとうございます。

回答No.5

b0a0a

そのページが凄いかどうかは微妙です
インパクトはありますが、画面サイズが大きいことが前提ですよね
基本的に、デザインは機能性あってのものだと思います

Webは様々な環境、デバイスが利用するものであり
１つ１つが技術として可能でも、現実的になんでもかんでも自由にはできません
その部分が最も難しい点かもしれません

それはおいておいて、
機能性を上げる目的での、ある程度型にはまった部分的なアニメーションであれば
様々なライブラリを利用することで簡単に実現できます

もしもっとデザイン的に自由でダイナミックなことがしたい場合
昨今登場してきているオーサリングツールを利用するとよいでしょう
何れにせよ、JavaScriptの知識はあった方がいいです

ベースとなる技術的にはCSSアニメーションを学ぶといいでしょう
また、今年から来年にかけて、CSSアニメーションとSVGアニメーションを統合して
JavaScriptから扱いやすくしたWeb Animation APIが整備されていきます

近い将来にはこれが必須知識になると思います

お礼

ご返答ありがとうございます！

＞ベースとなる技術的にはCSSアニメーションを学ぶといいでしょう
＞また、今年から来年にかけて、CSSアニメーションとSVGアニメーションを統合して
＞JavaScriptから扱いやすくしたWeb Animation APIが整備されていきます

頭にいれておきます。
webの世界は新しい事がどんどん増えていき大変ですね。。
デザイン力以外にも単純な知識力、技術力も相当すごそうです。
ありがとうございます！

回答No.4

ORUKA1951

紙媒体出身の方にとても多い誤解部分を重点的に説明しておきます。
ウェブは発明者であるバーナーズリーが想定したのは、「自分の知識や考えを共有させることが、他人の知識を 学ぶのと同じくらいに容易であるようなシステム( http://www.sal.tohoku.ac.jp/~gothit/webauthoring2.html )」です。そのためにSGMLの技術を参考に、Hper Text Markup Language--HTML(やHTTP)を考案しました。
★すなわち、文書を<h1>ここは見出し</h1><p>ここから段落</p>のようにタグを使ってマークアップしてどのようなコンピューターであっても内容が理解できるようにし、他の文書などにリンクと言うシステムでたどり着けるようにしたものです。
　★どのようにそれを表示するかは、それを利用するブラウザに任せることで、汎用性を高めたのです。
　『プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせる( http://ja.wikipedia.org/wiki/SGML#.E8.83.8C.E6.99.AF )』
　・・・SGMLのこの項目(背景)の説明は理解しておくこと・・・

　ウェブを利用するのはscreenと総称されるディスプレイだけでなく、視覚障害者向けのスクリーンリーダーや点字端末や印刷機、携帯電話、そして検索エンジンのようなシステムもあります。

　zin-ic.comのようなflashの将来はわかりませんが、ウェブ/HTMLkの本来の姿とは少し方向性が違いますね。これだけでなく、どのようにデザインするかに注力がなされ、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　その反省もあってHTML4.01では『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』、HTML5では、『文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』新しい要素が追加され、マルチメディア向上のため「マルチメディアコンテンツのための audio 要素と video 要素が導入されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」
　video要素やスタイルシート、javascriptがflashを完全に置き換える技術になるまで成長するか否かは分かりませんが、flashの使用機会は減っていくでしょう。
　私はほとんど使用していません。

＞このような動きのあるデザインはどういった技術が必要ですか？
　スタイルシート、javascript(JQuery,Ajax)、Video要素、audio要素を身につけていきましょう。

　⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
　⇒HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (1/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106.html )

　あなた自身、そのページが派手で動きがあってと言う理由でそのサイトを訪問しますか？？少なくとも私は内容ですね。

お礼

ご回答ありがとうございます。
こちらもすごく参考になりました。
おっしゃりたい事はすごく分かるのです。
紙媒体でも同じ所もあるのが重々承知しています。。
自己満足では意味がないというのは嫌というほど味わってきました。

紙のときもそうでした。かっこいいグラフィカルなイメージが作りたい！
それがきっかけでデザインを始めました。
しかし仕事となると、そんな仕事はなくパッケージ商品等、
大衆的なものばかり、しかしその中でもちゃんとしたデザインの効果が
ある事を知り、むしろ今はそれがたのしいのです。

単純にwebを始めるにあたって、見た目だけかっこいい！から
入る動機はいいんじゃないかと思います。
ORUKA1951さんのおっしゃりたい事はわかります！
それを肝に銘じてwebの世界にも入っていきたいと思います。
ありがとうございます！

回答No.3

Glory_777

Web上で右クリックをすると、Adobe Flashについての表示が出ると思います。

なのでこれは、Flashという技術を使っていると思われます。

他にもMicrosoft社ではSilverlightなどがあり、同様の技術を持っています。

少し解説しますと、

一般にWebの基本と言われているHTMLは、主にテキストを綺麗に見せるものです。

文章に特化して記事を綺麗に整形する機能が多数あります。

これが刺激になって、pngやJpegなどの画像も挿入できるようになりました。

すると、これがどんどん進化して、

チェックボックスやプルダウンメニューのような複雑なアイテムを盛り込めるように
なってきたのです。

ここまで来ると、最初のHTMLの趣旨は失われてしまい、
Webにエンターテイメント性が求められてきます。

名前はWebでも、その基本となる仕組みは全く違うものが登場し始めます。

これで有名になったのがFlashです。

あとから追従し、Silverlightなどが登場しました。

これらは、もはやHTMLの様なライトな仕組みではありません。

本来ならばOSやゲームを作るような、クレージーなテクノロジーを、Webブラウザを
改造（プラグイン）することで強引にぶちこんで、激しく華やかなグラフィック表示
が出来るようにしたのです。

綺麗なサウンドは成るわ、ジョイスティックを認識するわ、動画を配信するわと、
元のWebの痕跡すらありません。

どう考えても、やり過ぎだろうと言うくらいチューンされています。

勿論、使うために必要となる知識や経験、開発環境などもスペシャルです。

これではまずい（独占される、自分達の立場がなくなる）と考えた人達がHTML5と言う

規格を作り、

「これまでのHTMLよりも凄いことができるHTMLを考えたので、ブラウザを作っている
　会社に皆でプレッシャーをかけて、無料で提供させないか？」

と言うとんでもない事を言い出しました。

さすがに「どうして・・・」と思う人達がしぶってしまい、
現状では静観という状態です。

しかし、賛同する人も多くいます。

何故かと言うと、

「HTML＝渋い・地味、Flash＝派手・SFみたい、Silverlight＝マイクロソフトで大丈夫？」

と言う構図になっており、派手でSFみたいなWebを作るためには、

FlashやSilverlightについて学び、

プログラマーと殆ど同じ技能が必要になるからです。

誰でもお手軽に、お金をかけずに、凄いWebが作りたいはず。

HTML5はそうした期待を担い、今後は主流になっていくと予想されています。

ですがそれまで待っていられないので、

広く普及しているFlashまたは、マイクロソフト社が意地でサポートするはずのSilverlightを
使ってWebを作成する人が相当数います。

質問者さんが見たサイトはその一つですね。

いまのWebはクライアント（PC端末など）の性能をフルに使って、オンラインゲームも作れます。
Flashゲーム等もその一つですね。いまやソーシャルゲームでは主流じゃないでしょうか。

ですので、はじめてのFlash、と言うテーマから書籍や記事を探し、学んでいくと良いと思います。
このサイトでは、FlashとかC#とか言うジャンルになります。
（C＃ですと、Silverlightです。Wikiなどで調べるとよいです）

私が思うに、
これらどちらかを、プログラマ的な自分に成る覚悟で取り組む必要があると思います。

もちろん適性もありますが、

むっちゃ面白いですよ。

仕事も広がると思います。

以上、ご参考になれば。

お礼

大変詳しくご説明いただきありがとうございます！
流れが一目でわかりました。

＞私が思うに、
＞これらどちらかを、プログラマ的な自分に成る覚悟で取り組む必要があると思います。

この辺りですよね。デザインはある程度して打ち合わせしつつ
プログラマーの方はお任せするという形が本当はいいのでしょうが、
知識的な意味合いでどういった仕組みなのか
知っておきたいという気持ちがあります。
デザインはメインですが、勉強はしていければなと。
本業の方には適いませんが、本業のプログラマーの方に頼む際
どういった事ができるのか、というのもデザインする上でスゴく
やりやすいかなと感じました。

Glory_777さんはプログラマーの方なんですか？
すごく詳しく文章も読み易いので、
いいお仕事をされてると思いました。

回答No.2

noname#214300

右クリックすればすぐに分かると思いますが、Flashで作ってますね。

お礼

FLASHなのですね。
何もかもに手を出すのはだめかなと思いますのですが、
一度勉強したいです。
ありがとうございます。

回答No.1

中京区 桑原町（@l4330）

こういうサイトは、始めは素晴らしいと思うけど二度と訪れないサイトですね。

何度も行きたいと思うのは素早く多くの情報が見やすくデザインされたサイトです
http://jpn.nec.com/index.html
http://www.fmworld.net/
http://www.yahoo.co.jp/
こんなサイトがリピータを増やします

お礼

ありがとうございます。
的を射ています。僕もそう思います。
ただポートフォリオサイトとして
技術力やセンスをアピールしてるという目的だと
思いますので、これはこれでいいのではと感じます。