html5 を含む記事

April 25, 2015

Webデザイン豆知識

僕のWebデザインの師匠ksk氏と久しぶりにご飯を食べました。知らない事があったので議事録を書きました。興味のある人は見て下さい。(Webデザイナーしか興味無いと思います。笑)

HTML5属性とCSSで要素内容の直接編集を可能に
43


僕の師匠ksk氏のサイト(CSSでなんでもやってしまうCSS変態です。笑。凄いです。)
http://ksk-soft.com/

ksk氏は仕事ではマークアップ原理主義者の傾向があります。Webデザイナーを始めた頃は「つまらない主義だなあ。見た目にこだわって楽しい方がいいじゃん。」と思ってましたが、大学でデザインとは何かを勉強するに従って僕もマークアップ原理主義になりつつあります。

やっぱりウェブサイトは、まずマークアップをしっかりする事が大事!
マークアップをおろそかにして、CSSやJavascriptを駆使し面白い何かを実装したり凝ったデザインは本当に必要かってことです。情報や空気感を伝える為やユーザビリティの為に必要だからやるんならいいんですが、意味も無くむやみにやるのはどうなのかという事です。

そういった意味でも一歩、師匠に近づいたかな。なんでもそうだけど、最初って見た目とか表面のかっこよさに走るよね〜。バンドとかサーフィンとかでも。でも最初は、そういうのに走った方がいいと思う。大事な事って最初から見えるはずがないからです。





happygolucky1969 at 04:35|PermalinkComments(0)TrackBack(0)

July 27, 2014

入賞して10万円!

先日のブログに書いたWEBのコンテストですが、
http://blog.livedoor.jp/happygolucky1969/archives/52420411.html
なんと入賞しまして授賞式におよばれしたので行ってきました。

場所は渋谷マークシティ13階 株式会社サイバーエージェント。全国各地からたくさんの人が来場していました。250〜300人いたと思います。大手企業やメディアの方もたくさんいました。

まず来場者全員にイベントのTシャツがプレゼントされました。
IMG_1457


挨拶がありいよいよ授賞式です。
IMG_1458


僕らの「エルモのだいぼうけん」がセサミキャラクターを活かした、子供向けのインタラクティブな絵本という部門で見事に選ばれました!うれしー!僕たちは3人チームです。代表者1人が前に来て下さいだったので、チームメイトでもあり、WEBの師匠でもあるKSK(けーすけ)氏が前に。下の段左から2番目。
IMG_1461


賞金はなんと100,000円!最高です。
IMG_1472


IMG_1468


最優秀賞は1,000,000円です!うらやましー(((( ;゚д゚))) ほんとはこれが欲しかった(笑)。制作は1ヶ月ちょっと。時には3人で徹夜したりして頑張りました。僕は6月のサーフィンはお休み、大学の勉強も後回しにしたりしました。それらの原動力になったのは、何を隠そう1,000,000円だったのです。(がめついとか言わず、人間らしいと言って!)女優の方もいました。
IMG_1467


授賞式が終わると、軽食が出て懇親会が始まりました。名刺交換させて頂きました。受賞者のライトニングトークというのもありました。前に出て作品を説明したりアピールしたり。全体的にデザイナーというよりプログラマーが多く、ほとんどの人達は色白で眼鏡できゃしゃな方達ばかりでしたので、僕みたいにのは異色だった。(笑)

なんだかんだ貴重な体験でした。

関係者のみなさまお疲れさまでした、そして本当にありがとうございました。クリエイターにこの様な表現の場を提供して頂いた事、とても感謝しています。ついつい仕事以外での何か新しい創作作業ってお金にならないので後回しにしがちです。でも賞金の有無に関わらずコンテストってそれ自体が目標になるので、とても励みになります。これからもこの様な場を提供してくれるとを願っています。

HTML5 Japan Cup https://5jcup.org/

「エルモのだいぼうけん」 https://5jcup.org/works/53b130a243df3d6b8700839d
ちなみに最新機能を多様した作品なのでインターネットエクスプローラーとかでみてもダメだと思う。FireFoxがおすすめです。




happygolucky1969 at 12:16|PermalinkComments(4)TrackBack(0)

July 16, 2014

WEBのコンテスト

前にブログでお伝えしたWebデザイナーやWebエンジニアのためのクリエイティブ・アワード(コンテスト)について。

フリーランスのWebデザイナー仲間3人でコンテストにエントリーする為に作品を制作していました。時にはみんなで徹夜もしました。6月は大好きなサーフィンはお休み。大学の勉強も少なめ。製作期間は1ヶ月ちょっと。

HTML5 Japan Cup、WebデザイナーやWebエンジニアのためのクリエイティブ・アワードというコンテストです。https://5jcup.org/

スポンサーが凄いです。NTTコミュニケーションズ、KDDI、朝日新聞、HANDS LAB、Adobe、Microsoft、Softbank、BANDAI、W3C、mozilla、JOYSOUNDなどなど、後援やスポンサーが60社以上であります。賞金総額350万円!わぉー(☆☆)!!

作品の応募には多数の項目がありました。その中で僕たちがエントリーしたのは「セサミキャラクターを活かした、子供向けのインタラクティブな絵本。セサミストリートのキャラクター素材を活かした、3〜6歳の子どもに向けたインタラクティブな絵本アプリを制作してください。」というものです。

僕たちの作品「エルモのだいぼうけん」
medium_screen1


■技術的なポイント
html5という新しいWebの言語で音声やアニメーションの実装にチャレンジしたところ。javascriptも最小限にしたところ。最新技術であるCSS3を多様。文字は全て自作のウェブフォント。jpegやgifなどの画像は一切使っていない。

■企画上のポイント
「就学前の子供がタブレットで読む絵本」にする為に、「幼児でも触ればわかる操作」を大前提にしました。あえてページの概念をなくし「巻物」的な読み方を提案します。絵本のページをめくる動作の代わりに『スワイプ』が楽しくて、繰り返し読みたくなる作品を作りました。
といった感じです。

最新技術を多様したのでモダンブラウザ以外は今回は無視しました。だからIEでみてもダメですよ〜。PCならFireFoxで見るのが最適です。タブレットにも対応させましたが、完璧ではありません。たくさんの事を研究しないといけません。制作の中で課題がたくさん生まれました。

制作時間が短かったので、完成までは至らず途中な所がありますが制作途中でもエントリーOKと言う事だったので、徹夜でやれる所までやってエントリーしました。期日に間に合うように無難なものを作るより、「新しい事にチャレンジした結果、途中ですがよろしくお願いします。」の方が良いと思い、そうしました。審査員の方々にその熱意が伝わる事を祈ります!

みんなで面白いアイデアを出しながらの作業はとても楽しかったです。素晴らしいメンバーに感謝です!楽しいものを作るにはまず制作者が楽しまないとね!バンドでもデザインでも同じですよね。表現者の基本だと思います。

HTML5 Japan Cup → https://5jcup.org/
にアクセスして、メインメニューの「応募作品」のページにいって下さい。
応募作品の検索に「エルモのだいぼうけん」と入力してクリック!
僕たちのエントリー中の作品が見れますよ!

エルモが海を潜る潜る。どんどん潜って海底を突き抜けると、そこには…!?
さあ、この夏あなたもエルモと一緒にだいぼうけん!

enjoy your summer





happygolucky1969 at 12:57|PermalinkComments(0)TrackBack(0)

February 25, 2014

府中でホームページ

ちゃんとした自分の仕事のサイトを作りました。

manaka design 【マナカデザイン】です。よろしくお願いします。

manakadesign

http://manakaa.com/

何回も作り直してこれになりました。最初、仕事のサイトなのでビジネスっぽいデザインにしました。まあ、よくある感じのビジネスっぽい感じの、あたりさわりのないやつ。でも、のりこさんやWEBの師匠にまとまっているけど「っぽくない」と言われ、自分でもそう思っていたので自分らしさを出しました。

そしたらこんな感じになりました。好きなようにやったデザインです。気に入ってます。

世の中にたくさんたくさんあるホームページ制作のサイトと差別化して個性を出すには自分らしさを出さねば!と思いました。いいか悪いかは別として自分らしさは出てると思います。あと、普通を装って中途半端になってしまうと最悪だもんね〜。2人に言われなければ危なく普通になる所でした。

やはり何事も「自分らしさ」が大事だ。

【サイトについて】
・css3を使いアニメーションを実装したりしています。アニメーションは古いブラウザでは動かないかも(IEの古いのとか)。最新のブラウザで見て下さい。古いブラウザに対応する事も可能ですが、その分サイトが重くなります。最新ブラウザで見てる人に負荷がかかりストレスになります。そもそも古いブラウザを使ってる人は細かいデザインなんて気にしていないだろうから、そのような人たちの為に対策をして、最新の人たちにストレスをかけるのはどうかと思う!というポリシーです。もちろんクライアントさんからの仕事の場合は要望があれば対策はしますよ。

・パソコンとスマホでは違います。パソコンではいろんなアニメーションがあり楽しい感じですが、スマホ版はその辺はカットしてます。小さい画面でごちゃごちゃやってもよくわからないので内容優先です。スマホでは最低限の内容が伝わればよいかと思います。

サイトとは関係ないけど、Windows XPは今年の4月でサポート終了です。危険なので新しいのにした方がいいですよ。

・html5 css3です。マークアップもしっかりしてます。レスポンシブデザインです。写真やイラストはimageですが、文字はweb fontを使用。キャッチコピーは難しいですよね〜。もっといいのが思いついたら変えます。それが紙媒体と違い「いいね!」

ホームページのことなら"manaka design"
今後ともどうぞよろしくお願いいたします。....仕事ください。


リンクとか貼ってくれたらうれしいです。



happygolucky1969 at 10:45|PermalinkComments(0)TrackBack(0)

October 23, 2013

JUICY EYES

juicy_top

http://juicyeyes.com/

制作していたサイトが出来上がりました。広尾にあるまつ毛サロン「JUICY EYES」今年で10年ということで、サイトをリニューアルしました。

イラスト制作、デザイン、コーディング。HTML5.CSS3。写真やイラストは画像ですが、その他は画像を使いませんでした。CSS3とjQueryとWEB FONTSで実装しています。画像を出来るだけ使わないという事は、サイトが軽くなり表示速度が上がります。

topページとshare roomページのイラストを描きました。集合写真とtopページの立て看板は撮影に行きました。海の写真は写真家高砂淳二さんの撮影によるものです。
高砂さんの写真が奇麗だったのでデザインもやりやすかったです。デザインにおいて写真は重要ですねー。

最新のHTML5で作りました。SEO対策はちゃんとした世界基準のマークアップとGoogle マスターツールの登録。

JUICY EYESスタッフの皆様、お疲れさまでした!

http://juicyeyes.com/

happygolucky1969 at 19:03|PermalinkComments(0)TrackBack(0)

September 14, 2013

でんでん虫

今週は仕事をしつつ大学の勉強頑張りました。哲学のレポートは無事に提出出来ました。フランス語はなんとか大丈夫そうです。そして毎週やってる金曜ウェブデザイナー勉強会にも行ってきました。いつもCSS3やHTML5やWordPressについてやっています。今日はGIFアニメでパラパラアニメを作り、さらにそれと同じものをCSS3で実装してみました。複数の画像で実装するパターンと1枚の画像で実装(cssスプライト)のパターンなど。動くものは楽しいですねー。

こんなのです。セロハンテープでんでん虫。画像は家で撮影して用意していきました。
denden


これで週末はサーフィンに行けます!台風18号接近中。ドキドキです。クローズアウトかなあ。
K10045041511_1309130456_1309132308_01


みなさん、楽しい週末を!

happygolucky1969 at 01:36|PermalinkComments(0)TrackBack(0)

July 20, 2013

広尾GLOSSY

制作していたウェブサイトが出来あがったので公開しました。
http://glossy-wax.com/

logo_index


広尾にあるブラジリアンワックスサロンです。お店の名前はGLOSSYです。この夏つるつるになりたい人はいってみたら〜?

ロゴマーク、イラスト、デザイン、コーディング、写真撮影&加工........ようするに全部作業しました。

クライアントさんが、ピンクが好きで、シンプルでかわいいサイトがいい!という事でしたので、こんな感じにしてみました。とても喜んで頂き、感謝しています。クライアントさんが喜んだ時が制作者として最高に嬉しい時です。v( ̄∇ ̄)v 完成したサイトを見てフライヤーや名刺のデザインもお願いされました。やったー(⌒-⌒)

僕は制作に入る前の打ち合わせで、雑談をよくします。そこで色んな事を感じとります。例えば、「シンプルでかわいい」というのはとても抽象的です。人によってシンプルやかわいいの定義が全然違います。そこで、雑談の中からその人を感じとるんです。口調、服装、趣味、持ち物などなど。それで、この人の言うシンプルは、ああなんだなあ〜こうなんだなあ〜と推測します。ちゃんと細部まで説明してくれるとお互いのズレはなくなりますが、そもそも頭の中にある、ぼんやりとしたイメージが言葉や絵で表現できないので仕事が依頼されるわけで、その辺はほとんど期待していません。
 この人は僕に何を期待しているのか?を最初の打ち合わせで理解する事が仕事がスムースに行く秘訣だと思います。あとは、お互い信頼する気持ちですね。今回はスムースにうまくいったと思います。ありがとうございます。

☆★☆★技術的な事☆★☆★
最新のhtml5とcss3です。グローバルナビにホバーした時に疑似要素を出します。その際にtransformで、ちょっとかわいい動きにしました。その最新技術はFireFoxやクロームだと対応してますが、古いIEだと非対応なので、かわいくない。IE用にjQueryで対応してもいいですが、サイトが重くなったりするし、閲覧に支障はないので、その辺のユーザーへのかわいい機能は、切り捨てます。そういう事に無頓着な人がIEを使ってる場合が多いからです。

SEO的な事は、html5でのちゃんとしたマークアップを心がけGoogleウェブマスターツールに登録などなど。

今回も分らない事や相談など、りんごのタカハシ先生にお世話になりました。ありがとうございました。

happygolucky1969 at 10:34|PermalinkComments(0)TrackBack(0)

June 08, 2013

パソコン倶楽部りんご

毎週金曜日はWebデザイナーの仲間で集まり勉強会をやっています。html5,css3,wordpress........Web業界はおそろしい早さで進化するのでついていくのに、みんな必死ですε=ε=(;´Д`)(必死はおおげさかっ)
勉強会の団体名は、「パソコン倶楽部りんご」です。おばちゃんが、習いに行くカルチャー教室みたいなダサい名前で油断させておいて(誰にだよ?w)最新技術を駆使する団体という感じでやっています。りんごはジョブズに敬意を表してつけました。一応サイト(wordpress)もあります。http://clubringo.com/

某マルチメディアスクールで講師をしていたKSK氏に顧問をして頂いております。WEB関係の質問ならほとんど大丈夫です!どなたでも参加できます。興味がありましたらご連絡下さい。勉強会は、お菓子をポリポリ食べながらゆるく真剣にやっているので楽しいですよ。

ゆるキャラ↓

シンバ
201306cats 011


ティモン
201306cats 003


みなさん、楽しい週末を!

happygolucky1969 at 03:44|PermalinkComments(0)TrackBack(0)

February 08, 2013

BBサイト リニューアル!

The B.B.Boogieのホームページ リニューアルしました。まだ途中の所とかありますが、アップしました。途中の所は時間がある時に作業していきます。

web_top


http://thebbboogie.com

みなさん、よかったらリンクを貼って世の中にB.B.Boogieを広めて下さい。(^∀^)ありがとう。

--------------------------------------------------------------------------
html5 , css3といった新しい技術で制作したので、IE等の新しい技術非対応の古いブラウザで見ると多少変な風に表示されると思います。クロームやFireFoxといった最新技術対応のブラウザで見る事をお勧めします。
--------------------------------------------------------------------------

今日は夜、プールに行きました。平日の夜はすいていていいです。そのあとGの玄ちゃんがうちに来て曲作りをしました。もうねむい〜。

のり子さんが風邪をひきました。皆さん、体調管理をちゃんとして気をつけて下さい。

happygolucky1969 at 00:26|PermalinkComments(0)TrackBack(0)

October 21, 2012

田中こうすけ治療院

フリーランスの方でのお仕事。

1つ完成しました。微調整するところも多少ありますが、とりあえず完成です。
田中こうすけ鍼灸マッサージ治療院。

tanaka

どうぞ見て下さいませー。
http://tanakakousuke.com/index.html

ディレクション、デザイン、コーディング、その他全部ひとりでやりました。
先ほどクライアントの田中さんと、完成!お疲れさま―!という事で居酒屋で乾杯してきました。
田中さん、依頼してくれてどうもありがとう。治療院がもうかってサイトリニューアルの際には、またよろしくー。

僕も気に入っているし、何よりクライアントさんが気に入ってくれたので嬉しいです。
僕はやはりかっちりしたものより、ちょっと柔らかいものが得意なようです。新宿での仕事はかっちりしたものを要求される事が多いので、なんとか頑張っているわけです。今後は、得意なものを伸ばしつつも最低限はどのジャンルも出来ないとね。

今回のサイトもHTML5でやりました。CSS3も使ってます。jQueryも。

田中さんに治療してもらいたい人、ご連絡下さい。
特にやわいマッサージじゃものたりない人、田中さんはがっつりやってくれますよ!

僕の方もWEB制作のお仕事受付してまーす。

さて、次の仕事にとりかかろっと。

その前にサーフィンに行くかな!!!!

happygolucky1969 at 02:14|PermalinkComments(0)TrackBack(0)