忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Swap Skills Doubbble 『Webサイトもスマホアプリも!One Web』 に行ってきた

昨日、Swap Skills Doubbble 『Webサイトもスマホアプリも!One Web』というセミナーに参加してきました。
記憶の新しいうちにレポートを記載します。
初めて大井町駅に降り立ったのですが、成城石井があって2回も立ち寄ってしまいました(何も買わなかったけど

おことわり

  • とにかく長いので、暇なときに読んでください。
  • 講演の資料が手元にないので、私のメモベースの話です。
  • 一応有料のセミナーなので、講演の内容は下記のすべてではなく、私が気になった箇所をメインにご紹介しています。
  • 講演者がお話されたことに対し、私の解釈を加えた内容になっています。
    『講演された方のお話そのもの』ではありませんので、誤解なきようお願いいたします。
    不快な思いをされた方や、誤解を招く表現などありましたらご指摘いただければ幸いです。

始まる前に

まず服装なのですが、こういうセミナーの参加が初めてだったので、
外出着(ジャケット+きれいめスカート)レベルで行ったのですがみんなカジュアルでした(笑
ホットパンツのガールもいらっしゃった。
まぁ、みんなスーツの中ひとり私服、よりもましかと思って諦めました。

あとは、司会のお姉さんが緊張しているのか、めちゃくちゃカミカミでした。
あまりこういうWeb系のセミナーに参加したことがなかったので、かなりバタバタしている印象を受けました。
オープニングムービーもなんだか端が切れてたみたい。(解像度があってなかった?)
最初、そういう仕様?かと思ったが、さすがにスポンサーロゴが切れてたので何かあったんでしょうね・・・・。


Transformative Web Design/長谷川 恭久さん

長谷川さんのブログ(サイト?)Couldは学生時代よく読んでいまして、最近めっきり回覧が遠のいていたのですが、今回講演されるということで、大変嬉しく思いました。
長谷川さんが講演されるということが、今回セミナーに参加を決めた理由の一つです。

長谷川さんの講演は、私の心にささる部分が多く、
"Webにかかわるさまざまな分野の人が、『Webを良くしたい』と思っているけれど、なかなかうまくいかないと感じている。
『分野が違うから私は知らない』というのでは、これからやっていけないのではないか?"
と私のメモに書いてありました。これ、まさに私が思ってることだよ・・・と思いました。
(自分が長谷川さんの話を聞いて考えたことをメモっただけかもしれない。。。自信ないです。)

今、マルチデバイス化が進んでいるけれど、Webは紙やそのほかの媒体とは違うと、再認識してほしい。
たとえば紙は、A4やB3など、カンバスに制限があり、その制限があるからこそできるデザインというものがある。
しかし、Webにはそのような制限はない。モバイルやデスクトップにとどまらず、将来は冷蔵庫やガラスやメガネにだって、Webサイトが表示される日が来るかもしれない。
そのときに、またそのデバイス用にリデザインをするのか?と考えると、気の遠くなるような話になってしまう。

コンテンツの表示サイズをデバイスごとに作り替える、という考え方ではなく、コンテンツ自体にたくさんの情報を入れておき、デバイスごとに出力するコンテンツを分ける、という考え方をしたほうが良い。 と、私は受け取りました。


レスポンシブWebデザインを 商業(ビジネス)サイトで実現するための考えと仕組み/菊池 崇さん

菊池さんの講演は、私のような技術者(エンジニア)よりは、ディレクターや、レスポンシブを導入しようか迷っているサイト運営者向けの内容だと思いました。

画像をいかにスマホ対応するか、という内容が一番印象に残っています。
response.jsを紹介されていて、このJSを使うと、デバイスごとに適切な画像サイズのものが表示されるとのこと。いくつか類似のものを調べた中で一番早いとおっしゃっていました。
個人的には一度自分で試してレンダリングしてみないことには。と感じたのでいずれ試してみたいと思います。

レスポンシブデザインのとき、デザイナーは『CSS3でこれってできるのかな?』については考えるけれど、
スマホのパフォーマンスを考えるとこの画像は重いかな・・・とか、考えることは少ないように思います。(少なくとも、私の周りでそのような考え方をしているデザイナーはいないです。)

私自身も、レスポンシブデザインは『CSS3』の技術、コーダーがどうにかするものなんだと思っていたのですが、
デザイナーも参加の余地があること、むしろ、デザイナーとコーダーの理解があってこそ、よりパフォーマンスの向上が図れるのではと思いました。


「デザインニング・イン・ブラウザ」/斎藤 祐也さん

斎藤さんの講演はかなりエンジニア寄りでした。たぶん、ディレクター寄りの人は、具体的にどのように内容を実践するのか、想像するのが難しかったのではないかなぁと思います。

内容はインブラウザ デザイン+αです。

現在は、PSDでデザインをして、その後コーディングという流れが一般的ですが、最初っからブラウザでデザインしたほうが、『これは本当にHTML(・CSS・JS)側でできるのか?』を先に試すことができるので、「これは100%実装できる」という確証が得られるので心理的に楽だと。

エンジニアにとって、『その技術が実装できるのか?』というのはかなり重要だし、判断に迷うときが結構あります。できるかどうかわからなくて、できないかも・・・と言ってしまうこともあります。先にHTMLでデザインしておけば、「これは実装できる」のは明らかですし、コーダーとしてはとても嬉しいです。

ただ、「CSS3が使用可能」な場合が一番の活用しどきなのかなぁと思いました。
HTMLでかたちづくったものがそのままベースとして使えるわけですから、CSS3で、グラデーションや角丸が使えてこそ、メリットが生かされるというか。
せっかくCSS3でエフェクトかけても、それが使えないなら結局フォトショで作り直しになってしまうわけですし。

このアプローチはずっとやりたいと思ってきたので、ころあいを見計らって提案してみよう。と、今回の講演を聞いて改めて思いました。


「制作」から「開発」へ、そして最先端へ - Webアプリ開発の現状と未来/白石 俊平さん

講演内容とは全然関係ないですが、白石さん自身、とても物腰が柔らかくてお話が聞きやすかったです。

内容は中の人がそっと教えるWebリニューアル失敗の顛末が元になっているとのこと。私は読んだことがなかったので、個人的に頷けることが多くて面白かったです。

講演の中で気になったのが、『sectionは(headerやfooter、articleなど以外の)汎用的なブロック』と言っていたこと。
「嘘だッ!!!」と思わず叫びたかったですが・・・。
ただ、白石さんご自身は『HTML5開発者コミュニティ「html5j.org」管理人』でいらっしゃいますし、
ご本人もdivとsectionは違う旨のお話をされていたので、簡単に説明するための言葉のアヤだとは思うのですが。

sectionタグは汎用的なブロックではありません。
sectionは文章を意味(章)ごとに分けるものであって、section内にはそのsectionの見出しをあらわす見出しタグ(h1~h6)が必ず入ります。

あと、footerの子要素に見出しタグ(h1~h6)は入らない、footerに見出しを入れるならsectionで囲んでください、という旨の発言をされていたような気も・・・。
ネットをざっと検索してみたのですが、「footerの子要素に見出しタグ(h1~h6)は入らない」という記事がどこにも見つからず、一応文法的には間違いではないのでは?と感じたんですが・・・。(私も自信がないんですが。)
header、もしくはhgroup要素の聞き違いだったらいいのですが。

と脱線してしまいましたが、講演内容に戻ります。
講演の中で、白石さんが『モバイルファースト』にする理由を述べられていて、それがエンジニア的にはとてもしっくりきました。

なぜモバイルファーストかというと、『それがモバイルで実装できるかわからないから』です。
エンジニアは、その技術が実装できるか否か、判断に迷います。本当は実装できないものなのに、実装できるのでは?と試行錯誤するとタイムロスが大変です。(このあたりは斎藤さんも同じニュアンスの発言をされていました)

その技術はモバイルで本当に実装できるのか?モバイルでのパフォーマンスはどうなのか?を知るためにも、最初にモバイルを考え、実装する『モバイルファースト』は、エンジニアとしてもかなり利点のある考え方なんだと感じました。(むしろ、エンジニアのための考え方だったんですかね?)


OneWebにする前に、コンテンツを見直そう!コンテンツ・ストラテジーの意味。/佐々木 朋美さん

講演が最後だったこともあってか、なのか、一番あ、すごい!と思ったのが佐々木さんの講演でした。
ご本人が最初に
『錚々たるメンバーのなかでトリなので、みなさん帰られるかと思ったんですが、いてくださってありがとうございます』
という旨の発言をされていましたが(笑)、私も大変恐縮ながら佐々木さんについては、「いったいどんな方なんだろう?何を話すんだろう?」と思っていました。

面白かったのは、『Webでよく起きるミスを他の媒体でたとえると致命的だよね』という話。
たとえば、Webでは画像のリンク切れや、テキストが「ダミーダミーダミーダミー」のまま入っていたり。
それを雑誌に置き換えてみると、ページに使われている写真が1箇所だけ空欄になっていたり、紹介文に「ダミーダミーダミーダミー」と入ったまま、出版されていることになり、それは冊子としてはかなり致命的なレベルでしょう。

「お客さんが用意してるんだから、そんなミスは知らないよと他人事のように思っていませんか?」
本当にそのとおりです。ごめんなさい。(平謝り)

また、「コンテンツ」をこちら側で指定してしまう、という方法があるんだ、という気づきがありました。
そもそも、コンテンツに何を入れるか、こちら側で大枠をつくる、という発想が今までなかった。
お客さんが考えて作るもの、お客さんからもらうもの、それがコンテンツだと思っていました。
こちらでコンテンツの枠組みを提供する、という発送に到らなかったんです。

今まで、CMSを使っていくつかサイトを構築してきましたが、その際、「お客さんが勝手に使うんだから、とにかく自由度の高いものにしなくては」と思い、結果的にあれやこれやと実装してかなり複雑な仕様になってしまったことがあります。
そうなった背景としては、お客さんが後から「こういうタイプの記事を作れるようにもしたいんだけど、できないの?」と言われることが何度かあり、
後付けのツッコミをなくすために、わざと自由度を高くしていた、というのがあります。

しかし、「自由に構築できる」ためには、どうしても複雑な手順や知識が必要となります。
一方、入力フォーマットがある程度決まっていれば、レイアウトに制限は出るけれども、入力作業は楽になり、更新もしやすくなる。
私は後者を勧めたいなぁと強く思いました。
そもそも、「こういう仕様で行くんで」と明確に決めて、お客さんに納得してもらっているなら、「こういうタイプの記事を作れるようにもしたいんだけど」ということは出てこなくなるはずですしね。

※すみません、全然『コンテンツ・ストラテジー』についての感想がないんですが。。。


おわりに

若い人ばかりではなく、40~50代の方もいらして個人的には驚きました。
Webの技術って、若い人ばかりのものだと思っていたけれど、そうじゃないんだぁと改めて実感しました。
社内での技術的な講演だと、たいてい『弊社はこういう方向性で行きたいから』というのがなんとなく見えていて、
もっと客観的な話が聞きたいなぁと思っていました。
こういう形で外部の人の講演を聞けるというのは良い経験になりました。
次回もがんばります!

PR

卒業研究展

本日から、研究室の卒業制作展が始まりました。
インタラクティブコンテンツデザイン展といいます。
就職活動中の卵たちがサイトを作っています。なのでコードは見ないで下さい・・・。

駅から遠く、曲がりくねった道を歩く隠れ家的な場所にあります。

この時期に卒業制作展を開いている大学が多いようで、
昼過ぎに宣伝も兼ねて他大学の展示会を見に行きました。


1.「卒展」女子美術大学 芸術学部 デザイン学科 VDコース

芸術学部だけあって、Web系のものはありませんでしたが、
絵本、漫画、油絵、などなど手製アートがいっぱい飾ってありました。

2.「apartment」多摩美術大学 情報デザイン学科 情報デザインコース

情報デザインということで、主にパソコンを使った展示物が多かったです。
ずらっと並べられたMac、テレビ。受付応対のすばらしさ。学生の展示会とは思えません。


ということで、とてもすばらしい展示会でした。
そして、今回の記事で言いたいことは、「展覧会に対する想い」です。

Helvetica展に行ってきた

昨日、研究室の友人と共に
ヘルベチカ展
「A tribute to Typography 〜ヘルベチカの過去・現在・未来」

に行ってまいりました。

Helvetica01.jpg

会場内では、Helveticaフォントの成り立ちや他のフォントの比較、
Helveticaを使った作品などが展示されておりました。

また、場内ではHelveticaムービーが上映されていたのですが、
かなり感銘を受けました。


印象に残った言葉。

「音楽が、音符間の間隔の違いで構成されているように、
タイポグラフィも文字間の間隔が大切だ」

ということ。


ロゴを作るときも、
どういうフォントを用いるのかも大事だけれど、
もっと大事なのは文字の間隔だということです。

どちらかというと、
「音楽は、音符と音符の間の何もない空間に意味があるんだ!」
みたいな事を以前聞いたことがあり、それを思い出して、
いいたとえだなぁと納得した、と言ったほうが正しいかもしれません。


最近は、文章にあわせて文字を変えたりします。でも、Helveticaはそうではなくて。
Helveticaのフォントのままで、コミカルな文章にも、シリアスな文章にもなりうる。
ということが言われれていました。


今まで、フォントなんてセリフかサンセリフかくらいしか考えたことがなかったのですが、
今回の展覧会でフォント自体に対する興味がものすごく湧きました。
前回内定先の体験入社でもフォントに関する課題に取り組みましたが、
私は「文章にあわせてフォントを変える」ことしか考えていなかったので。


会場の外には、
「ちまたにあふれるHelvetica」的な感じで、
大学生の方々が看板や広告を撮影したものが
壁に百枚弱貼り出されてありました。

周りのフォントなんか気にせずに過ごしていましたが、
写真を撮って何のフォントなんだろう?って調べることで、
フォントに対する愛着もわくし、
せっかく持ってるデジカメも浮かばれる気がします。


しばらく挑戦してみようかなと思いました。

dot fes に行ってきた

本日、新宿の芸能花伝舎にて催された、
「.fes 2008 TOKYO school festival for web designers」
に参加してきました。

会場の入り口から


入り口では、1-Click Aword の宣伝をしている方が腕立てふせしてました
ワンクリック・腕立て伏せ

NOW UPDATING -in ggg

本日は、8月28日まで銀座のggg(ギンザ・グラフィック・ギャラリー)で開催されている
NOW UPDATING…THA/中村勇吾のインタラクティブデザイン
に行ってきました。

思ったよりもこぢんまりしていて、とっても親しみやすい空間でした。

私の個人的な感想としては、
作品のコンセプトとして、「時間」と「共有」と「異質馴化」を感じました。


地下は、作品それぞれに時間を感じさせる演出がなされていてとても楽しめました。
「時間を忘れるように」作品を見ながら、それと同時に「時間を感じる」ことができる趣向。

あとは、「共有」。
インターネットというものは、同じサイトを同時に何人も見ているものですが、
(今●人がこのサイトを見ています、というものがありますよね)
実感することは難しいです。

それを実感できるようにしたコンテンツが展示してあって、
これはWebでしかできないなー、Webの利点を生かしていると感じました。

最後に「異質馴化」です。
異質馴化とは、今までにはない新しいものに対し、既存のやり方を流用して考える・取り組むことです。
この言葉を使うと少し語弊があるかもしれませんが、
Webという媒体に、たとえば風とか、自然の中で私たちが触れている「馴れた」ものを取り入れていました。


終わりに、閲覧者が自由に記帳できるひとこと板があったので、
それに絵を描いて帰ってきました。

ペンタブのような感じで、画面に専用のペンを使ってメッセージや絵を描くんですが、
これが同時開催されている大阪のdddギャラリー会場とつながっていて、
それぞれのメッセージが新しい順に別の画面に表示される仕組みになっていました。

Live感があって、歴史に名を残せた感じがしてちょっと嬉しかったです(大げさ)。
28日までやっています。まだの方は、ぜひ行ってみてはいかがでしょうか。

 | HOME | 
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
07« 2017/08 »09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
ブログ内検索
忍者ブログ [PR]