とってもとってもおひさしぶりな投稿
気がつけばブログから離れて約３年。。 時間が経つのは本当早いですねぇ・・ この３年で私の生活はガラリと変わりました。
- 子どもが産まれる
- 犬を飼う
- 引越しをする
などなど、とてもとても慌ただしく、賑やかな日々を過ごしています。 そういう一つ一つの詳細もブログで書けたらいいなと思ってまた始めようとはてブを開きましたw
2023年はアウトプットをがんばりたーーい！
時代はモバイルファーストからAIファーストへ！CSS Nite Shift12 「Webデザイン行く年来る年」に参加してきました
時間が空いてしまったんですが、去年の12月22日（土）に開催された、CSS Nite Shift12 「Webデザイン行く年来る年」に参加しましたので今更ですがそのレポートです。
CSS Nite Shiftは毎年欠かさず参加していて、これに行かないと年を締めくくれません！去年もしっかり締めくくってきました。
毎回とても勉強になるセッションばかり。全部は書ききれないので私が個人的に気になった所をまとめていきたいと思います。
- CSS Nite Shift とは？
- モバイルファーストからAIファースト
- Webクリエイターのための情報交換所
- ツール
- アクセシビリティ
- フォント
- 制作会社として抱く「このままでいいのか」問題
- 2018のデザイントレンド
- おまけ
- CSS Nite Shift12 スライドと動画
CSS Nite Shift とは？
CSS Niteは web制作に関する様々なテーマで開催されるセミナーイベントです。そしてCSS Nite Shiftは、毎年年末にその年のWeb制作シーンを振り返り、知識やスキルの棚卸しをする目的で開催されているイベントです。
今年はこれまでと少し違っていて、出演者の方の顔ぶれやセッション内容に変化がありました。これまでは割とマークアップ寄りの内容が多く、新しいコーディング技術が中心でライブコーディングなどもありました。しかし今回は「web業界の今後の動向」や「これからの時代で生きぬくには」みたいなお話が多かった印象です。
モバイルファーストからAIファースト
基調講演:「産業や社会、そして人の行動の変化、2020年に向けて何を見据えるべきか?!」
これからは農業や産業、ありとあらゆるものにAIが搭載される時代になり、自動運転、遠隔医療や無人の小売店、多言語同時通訳などができる時代になるそうです。
たしかに「話しかけるだけ」で操作ができるなんて、ほんの10年前まではドラえもんの未来道具のような、現実的なモノではありませんでしたが、今私たちはあたりまえの様にプロダクトに話しかけますよね。
今がちょうど転換期。どういう未来が創造されようとしているかを知り、私たちWeb製作者はどう参入していけばいいのか、そんな未来を生き抜くヒントが散りばめられていました。
紹介されていたムービー
【イメージムービー】Connect future ～5Gでつながる世界～（3分ver）
空から宅配の荷物を届けてくれるドローン！？
— 内閣府政府広報オンライン (@gov_online) 2017年12月25日
今ある食材からメニューを提案してくれるAI家電！？
自宅に居ながら受けられる遠隔診療！？
そんなソサエティ5.0の世界をご覧ください。#ソサエティ5.0 pic.twitter.com/Dc5sPdHoHR
Webクリエイターのための情報交換所
「Webクリエイターのための情報交換所」はWeb業界のトレンドやニュースを投稿できるFacebookのコミュニティです。お恥ずかしながら私ははじめて知りましたのでさっそく参加申請を出しました。
このセッションでは2018年の反響が高かった投稿を紹介。
気になる方は「Webクリエイターのための情報交換所」をのぞいてみてください。
https://www.facebook.com/groups/241838242545737/www.facebook.com
ツール
多様化するデザインツール。キーワードは連携。
このセッションでは普段デザイナーが何のツールを使っているか、アンケートの回答を元に紹介されていてとても興味深かったです。今って本当にツールが沢山あるので本当に迷います。それにデザイナーといってもいろいろありますから、他のデザイナーさんがどういうものを使い、どういう風に仕事をされているか興味津々でした。
便利なものはどんどん取り入れて行きたいです。
Q. 普段仕事で制作するもの
- （回答者数 143）
43% 入力操作を伴う動的なWEBサイト
40% リッチなグラフィックのWEBサイト
36% 静的ページ多めの読み物系WEBサイト
15% その他
Q. 2018年 Webデザイナーが使ったツールは？
- （回答者数 143 / 複数回答可）
85% Photoshop
70% Adobe XD
66% Illustrator
29% Sketch
ツールで多いのはやはりPhotoshopでした。私も基本的にはAdobe製品で統一しています。理由は連携しやすく使い慣れているから。あと、Adobeは会社でライセンス契約をしているので取り入れやすいからということが大きいかもしれません。 Sketchは興味ありますが、有料なのでプロジェクトで使うには少しハードルが高いですね。
アンケートだけではなく、ツールの便利な使い方の紹介もありましたので詳しくは動画やスライドでご覧ください。
セッション内で紹介されたツール
(フォローアップより抜粋)
1）iPadで利用できるPhotoshop CCの告知ページ
https://news.adobe.com/press-release/creative-cloud/adobe-announces-next-generation-creative-cloud-max-2018
2）.aiに対応しているハンドオフツール「Avocode」の紹介ページ
https://avocode.com/adobe-illustrator
3）.sketchファイルをバージョン管理できるサービス「Abstract」
https://www.goabstract.com/
4）要素間の距離を保ったままデザイン可能なSketchのプラグイン「Anima」
https://animaapp.github.io/docs/
5）Google謹製ハンドオフツール「Gallery」
https://material.io/tools/gallery/
6）Adobe XDの詳細アップデート情報。動画での使い方紹介などもあります。
https://blogs.adobe.com/japan/serialization/adobe-xd-update/
7）Googleのスプレッドシートを.xdファイルに連携できるプラグイン「Google Sheets for Adobe XD」
https://googlesheetsforadobexd.impekable.com/
8）写真配布サイト「Unsplash」の画像を簡単に.xdファイルに取り込めるプラグイン「PhotoSplash Pro」
https://www.qooqee.com/adobe-xd/plugins/photosplash/
9）.xdや.sketchから画面遷移図を作成することができる「Overflow」にを連携させるプラグイン
https://blog.overflow.io/adobe-xd-overflow-a-divine-connection-ba6908043dcf
10）ブラウザからログインして利用でき、複数人で同時編集可能なデザインツール「Figma」
https://www.figma.com/
11）インタラクションをコードで制御できるデザインツール「Framer」
https://framer.com/
12）.xdや.sketchを取り込んでリッチなUIアニメーションを作成できるツール「Kite Compositor」
https://kiteapp.co/
アクセシビリティ
デザイナー視点から考えるアクセシビリティ
毎回楽しみにしているセッションの一つです。アクセシビリティの話はもちろんですが、他ではない小ネタが満載なんですよ〜。今回は笑っていいとも!のパロディで進行されていました（笑）
途中に挟まるCMも面白い！これも含め、動画で見て欲しいです。
今回はデザイナー目線。W3Cのガイドラインに新たに追加された「4.5:1 コントラスト比」や、視覚的なアクセシビリティの考え方はかなり勉強になりました。
フォント
抑えておきたいフォントまわりのトレンド
毎度おなじみ高野さんとフォントおじさんこと関口さんとのセッション。相変わらず面白い。冒頭で紹介されていた「フォントかるた」が欲しくて、探してみるとAmazonに売ってました。
今年も沢山のステキなフォントがピックアップされていましたがここでは「今年の文字2018」をご紹介します。 他のフォントはスライドをご覧ください。（ページ下部にリンクがあります）
今年の文字2018
- 筑紫Q明朝L
- 貂明朝カラー化
- NPGクナド
- 高輪ゲートウェイ
ワンモアシングです #虎ノ門ヒルズ pic.twitter.com/Vu8RSWICPn
— 塚田哲也／大日本タイポ組合 (@dezaiso) 2018年12月5日
高輪ゲートウェイと虎ノ門ヒルズのフォントは市販されているものではないですが、Twitterで話題になっていたものです。
とても素敵ですよね！使われればいいのにな〜！（笑）
また、2018年はコーポレートフォントがWebサイトに導入されているケースが目立ったようです。ブランドに合ったフォントをアリモノから使うのではなく作ってしまう。そうすることで世界感を統一しやすく、またフォントは使用料がかかりますので結果的に費用を抑えることができるからだと思います。
今年はどうなって行くのでしょうね。注目していたいと思います。
制作会社として抱く「このままでいいのか」問題
デスクトップワークスの田口さんのセッションでは、制作会社における仕事内容の現状と不安、マネタイズのお話しがありました。受け身（受注案件）だけでこれから先やっていけるのか、そういった不安の解消のために行なった「自分たちならではの価値」の追求のお話は、私自身も考えていたことなのでかなり刺さりました。
2018のデザイントレンド
CSS Nite Shiftの目玉セッションです！これを見に来た！！って人も多いと思います。毎回ものすごい数のWEBサイトをピックアップされていて本当に圧倒されます・・・。
これだけでもデザインの参考になりますので、是非是非動画で確認してください！
おまけ
CSS Nite Shift12 スライドと動画
CSS Niteの有料版は、およそ90日後に、スライド/音声などを参加されていない方にも公開されます。 このイベントはチェックしてご覧ください。
IT現場で使う英語表現
英語がさっぱりダメな私。 ここに使える英語表現をまとめていきたいと思います。
続きを読むメルカリデビュー！iPhone7即売れ！！
遅ればせながら、メルカリで初出品してみました〜。
iPhoneXSへ機種変したのでiPhone7を出して見ることに。
当初はauの下取りに出そうと思ってたんですが、メルカリの方が高く売れるぞって聞いたので試しに出して見ると一瞬で売れました！
一瞬で売れすぎてもっと高く出せばよかったと後悔したほどw
下取りよりも5000円以上も高く売れたので結果満足です！
価格の違い
au下取り: ¥23,000円 メルカリ出品相場: ¥11,900~¥35,300
出品物のスペックと状態
- スペック: iPhone7 Rose Gold 128GB
- 状態: カバーとガラスフォルムをつけて使用してたので基本綺麗。でも画面の右上に少しヒビ有り。
ガラスフィルムを貼ってない箇所の右上部分にヒビが入ってるし、他も結構iPhone7出してるから、差別化を謀って特典をつけました。
差別化の特典
- 即購入の方には新品純正ライトニングケーブルプレゼント
- 「購入時に何メートルのケーブルが良いか書いてください」とコメント
これが結構きいたんじゃないかと個人的に思っています。
あとは色かな。iPhone7は結構出てましたがRose Goldはなかったと記憶しているので。
人気色は強いですね〜。
本当にものの1分で売れてしまったものだから、もっと高くしてもよかったと後悔だわ〜。
まぁ、記念すべき初出品が売れてよかったです。
これはハマりそうな予感・・。
【PS4】Dead by Daylight が想像以上に楽しい！そしてロゴがまた良い！
PS4に「Dead by Daylight（デッドバイデイライト）」というホラーゲームがあります。
完全オンラインのマルチプレイで、キラー（鬼）とサバイバー（生存者）に分かれてプレイする「鬼ごっこ」ゲームです。ゲームの詳細は下記のサイトがわかりやすいのでこちらを読んでください↓
www.gamespark.jp
友人に前から進められてたんですが、私はホラーが苦手なのでしぶってました。が、4月に国内版が発売になってしかも値段が2,400円とめちゃ安かったのでとりあえず買ってみました。
※ディスカウント期間は 2018年4月4日(水)～2018年4月17日(火) 。通常は3,000円です。
実際にプレイしてみて
楽しすぎる！本当楽しいww
世界観はホラー映画に入っている感じで怖いし緊張感もあります。キラーが近づいてくると心音が「ドクン・ドクン・ドクン」となってキラーの接近を教える為、静かな部屋でやらないといけません。それがまたさらに緊張感を醸し出すんですよ〜。
ホラーが苦手なので、処刑針に吊るされたり殺されたりするのは刺激が強くてプレイできないかなって思ってましたが、慣れてくると全然気にならなくなりましたw
今や「つられちゃったーー！ 誰かーーーww」って感じで楽しんでおりますw
なんて言いますか、「画面が怖い！」っていう感情よりも、「鬼ごっこ楽しい」が勝つんです。
こどもの頃に経験してた「鬼ごっこのどきどきわくわく感」を思い出すんですよー。
大人になった今、真剣に鬼ごっこなんてしませんからねぇ。
まだ始めたばっかりで脱出成功率が少ないので、はやく腕をあげたいですね。
キラーもやりたいな〜！
ロゴがすごく良い
Dead by Daylightのロゴが大好きです。 爪で引っ掻いたようなデザインなんですが、ロゴだけでこのゲームを語っています。
- 縦4本の引っ掻き傷 → サバイバー4人 ※一本一本顔になってる
- 横1本の引っ掻き傷 → キラー
アニメーションだと最後に横線が表示されるのでキラーがサバイバー4人を斬り殺すようになってます。
すごくシンプルなのにしっかりゲーム性を盛り込んでいるのはすごいなーと関心しました。
デザインも引っ掻き傷のような、魂が抜けているような、どっちでも取れるイラストですしね。
ゲーム中も、マッチング中に今何人マッチングされているかを見せるUIとしても使用されているんです。
そういうのも含めて設計されていて、私もこういうの作れるようにならないとなぁと反省させられます。。
このゲームはローディング見てるだけで幸せですよ〜。
まだプレイ総人口が少ないのか、マッチングに時間がかかる時があるんです。。
今安いし、みんなやってくれ〜〜！
store.playstation.com
【IE11/Edge】<label><input></label>の場合でもfor=""を入れないとテキストクリックでチェックされない
/* 誤 */ <label><input type="checkcbox" id="checkbox1">テキスト</label>
この書き方ならfor=""もidも短縮できると思ってたけど、
IE11とEdgeでは、こういう書き方の時でも
/* 正 */ <label for="checkbox1"><input type="checkcbox" id="checkbox1">テキスト</label>
チッ(･д･)
