さっちゃん

EC暦長めのフロントエンドコーダー。営業と経理以外はだいたいなんでもやってしまう感じで…

さっちゃん

EC暦長めのフロントエンドコーダー。営業と経理以外はだいたいなんでもやってしまう感じで過ごしてきたベテラン便利屋さん。最近はプロマネもやりはじめました。どこに向かっているのだろう。HTML/CSSとAdobeXDが大好き。小学生男子1名を育児中。

  • CSS Nite

    CSS Niteの参加レポートです https://cssnite.jp/

  • 現場学校04 - 参加レポート

    ライブ配信のコンテンツづくりに必要な「プランニング」を学ぶ、現場学校04のセミナー参加レポートです。 https://gbgk.jp/

  • セミナー参加レポート

    セミナー参加した時の自分メモです。

  • アクセシビリティのお勉強

    あれこれ参加したウェブアクセシビリティのセミナーレポートとかのまとめ

  • AdobeMAX

すべてのマガジンを表示

CSS Nite 『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」

そもそもCSS設計とは何か？CSS最大の欠点：グローバルスコープしかない →　スタイルが衝突する問題は努力と工夫でクリアするしかない →　努力と工夫＝CSS設計 なぜCSS設…

さっちゃん
さっちゃん
3年前
13

【現場学校04】Session 08「トラブル対策とリスクマネジメント（後編）」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはトラブル対策とリスクマネジメント（後編）。現場で発生しがちなトラブル事例を…

さっちゃん
さっちゃん
3年前

【現場学校04】Session 08「トラブル対策とリスクマネジメント（前編）」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはトラブル対策とリスクマネジメント（前編）です。 すべてのトラブルは人が招く…

さっちゃん
さっちゃん
3年前

失敗しない！Webサービスのリニューアル

数百万人規模のアプリリニューアルで実践した失敗しないテクニック 株式会社メンバーズポップインサイト カンパニー　CX/UXストラテジスト／岡 昌樹さん リニューアルで私…

さっちゃん
さっちゃん
3年前
2

【現場学校04】Session 07「コンテンツのプロモーション」（後編）

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマは昨日に続き、コンテンツのプロモーション（後編）です。 前編の板書はこちら …

さっちゃん
さっちゃん
3年前
2

【現場学校04】Session 07「コンテンツのプロモーション」（前編）

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはコンテンツのプロモーション（前編）です。 ターゲットユーザーに配信を見ても…

さっちゃん
さっちゃん
3年前
2

Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」

基調講演「Webエンジニアとしていま知っておきたいWebアクセシビリティ」 freee株式会社 デザイナー/エンジニア　ymrl さん ウェブアクセシビリティとは何か？ ・アクセシ…

さっちゃん
さっちゃん
3年前

【現場学校04】Session 05「配信ツール選び」（後編）

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマは昨年の最後にあったSession05の「配信ツール選び」の後編です。 前回のメモはこ…

さっちゃん
さっちゃん
3年前
2

【現場学校04】Session 05「配信ツール選び」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。Session05の今日のテーマは「配信ツール選び」です。 目的に合わせた配信ツール選び あらゆる…

さっちゃん
さっちゃん
3年前
4

ノンデザイナーが全社にAdobeXDを布教した話

この記事は Adobe XD Advent Calendar 2020 19日目の記事です！ 弊社は専門家マッチング事業、オウンドメディア運用支援、ECなどを展開している社員数約40名程度の事業会…

さっちゃん
さっちゃん
3年前
4

CSS Nite Shift14「ウェブデザイン行く年来る年」〜今 見直しておきたいCSSの新機能 2020

株式会社ICS 鹿野壮さん Chromium版Edgeの登場従来までのEdge ・Edge v18まで ・HTML/CSSのレンダリング：EdgeHTML ・JavaScriptの実行：Charka（チャクラ） ・他のモダン…

さっちゃん
さっちゃん
3年前
4

CSS Nite Shift14「ウェブデザイン行く年来る年」〜辻ちゃん・ウエちゃんのAccessiブル GoGo!「アクセシビリティ ゆく年来る年 2…

株式会社インフォアクシア 植木真さん／株式会社コンセント 辻勝利さん アクセシビリティ残念あるある2020対象：41サイト/768ページ/問題点18829件 1. キーボード操作時…

さっちゃん
さっちゃん
3年前

CSS Nite Shift14「ウェブデザイン行く年来る年」〜総決算！ 2020年のウェブマーケティング

株式会社まぼろし 益子貴寛さん／株式会社サイバー・アシスト 吉村正裕さん ・チャンス到来 　時代が大きく変わるときに「しがらみ」や「既得権益」が壊れる ・マインドチ…

さっちゃん
さっちゃん
3年前
9

【現場学校04】Session 04「配信に向けた準備」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。Session04の今日のテーマは「配信に向けた準備〜ライブ配信本番前の準備と確認」です。 シナリ…

さっちゃん
さっちゃん
3年前
3

Webアクセシビリティの学校 特別授業

いま私の中で話題のアクセシビリティ。 今回は「デザイン」という切り口の特別授業を受講です。 インクルーシブデザインで“未来の当たり前”をつくる 株式会社コンセント…

さっちゃん
さっちゃん
3年前
1

【現場学校04】ここまでのおさらいと質疑応答

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。2回目と3回目の間の今日は「補講」。ここまでの授業のおさらいと質疑応答回です。 コンセプト…

さっちゃん
さっちゃん
3年前
3
さっちゃん

さっちゃん

CSS Nite 『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」

CSS Nite 『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」

そもそもCSS設計とは何か？CSS最大の欠点：グローバルスコープしかない
→　スタイルが衝突する問題は努力と工夫でクリアするしかない
→　努力と工夫＝CSS設計

なぜCSS設計が必要か？・バグを抑える
・サイトの寿命を伸ばす
・サイトの改善スピードを速める

主なCSS設計・OOCSS
　→　ストラクチャーとスキンの分解
　→　コンテナとコンテンツの分離
・SMACSS
　→　CSSを5種に分類

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 08「トラブル対策とリスクマネジメント（後編）」

【現場学校04】Session 08「トラブル対策とリスクマネジメント（後編）」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはトラブル対策とリスクマネジメント（後編）。現場で発生しがちなトラブル事例を赤裸々に教えていただきます！

前編の板書はこちら

現場で発生しがちなトラブル事例
・カメラのメニュー表示
　→　撮影しているカメラのメニューをOFFにし忘れる
　→　オートスリープの復帰時にメニュー表示が戻る場合があるので要注意
　→　

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 08「トラブル対策とリスクマネジメント（前編）」

【現場学校04】Session 08「トラブル対策とリスクマネジメント（前編）」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはトラブル対策とリスクマネジメント（前編）です。

すべてのトラブルは人が招く機器トラブルも事前確認で回避できることもあるので要注意。
最低限ここだけは注意しよう！

カメラ
・明るさとホワイトバランス
　→　明るくしすぎない／白の基準
　→　自分が意図したものに対して、ナチュラルで違和感がないように
　→　同じ機

もっとみる
さっちゃん

さっちゃん

失敗しない！Webサービスのリニューアル

失敗しない！Webサービスのリニューアル

数百万人規模のアプリリニューアルで実践した失敗しないテクニック
株式会社メンバーズポップインサイト カンパニー　CX/UXストラテジスト／岡 昌樹さん

リニューアルで私たちは何を一新したいのか？
UI／UX／システム／オペレーション／ぜんぶ・・・

失敗例
・UIが古くなった
　→　目的がはっきりしない
　→　UIだけではなくあれこれ触り始めてしまい終わらなくなる
　→　誰の何を解決したいのかが

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 07「コンテンツのプロモーション」（後編）

【現場学校04】Session 07「コンテンツのプロモーション」（後編）

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマは昨日に続き、コンテンツのプロモーション（後編）です。

前編の板書はこちら

動画コンテンツのアクセス解析「再生回数」以外にどんな数値を見るか

・再生回数
　→　多ければ多いほど良いというものでもない
　→　来た人がどのくらい興味をもって見続けるか
・平均試聴時間
　→　一般論と比較してではなく、自分のコンテン

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 07「コンテンツのプロモーション」（前編）

【現場学校04】Session 07「コンテンツのプロモーション」（前編）

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはコンテンツのプロモーション（前編）です。

ターゲットユーザーに配信を見てもらうためのステップ・認知（知ってもらう）
・興味
・欲求

「認知されるだけ（知っているだけ）」では意味がなく、「興味を持ってもらう」ところまでセットで考える

動画配信を活用したプロモーション動画広告のメリット
・情報量：テキストやバナ

もっとみる
さっちゃん

さっちゃん

Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」

Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」

基調講演「Webエンジニアとしていま知っておきたいWebアクセシビリティ」
freee株式会社 デザイナー/エンジニア　ymrl さん

ウェブアクセシビリティとは何か？
・アクセシビリティ：あらゆる状況で誰にとっても使えること
　状況を狭く限定して、使いやすさを深く追求する
・ユーザビリティ：特定の状況で特定のユーザーにとって使いやすいこと
　状況を広げることを追求する。使いやすさには比重を置い

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 05「配信ツール選び」（後編）

【現場学校04】Session 05「配信ツール選び」（後編）

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマは昨年の最後にあったSession05の「配信ツール選び」の後編です。

前回のメモはこちら

配信エンコーダーとは？

カメラやマイクの映像（ローカル環境）をインターネットに配信するためのツール。
ハードウェアとソフトウェアの2種類があり、ソフトウェアタイプのものはスマートフォンなどにも搭載されている。

ハード

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 05「配信ツール選び」

【現場学校04】Session 05「配信ツール選び」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。Session05の今日のテーマは「配信ツール選び」です。

目的に合わせた配信ツール選び
あらゆるケースで万能なもの、というのは存在しないので、メリット／デメリットを理解した上で、最適な物を選ぶ必要がある。

ツール事例「LiveShell X」
ライブ配信専用のエンコーダー。Cerevo社のハードウェア。
・配信専用のパソ

もっとみる
さっちゃん

さっちゃん

ノンデザイナーが全社にAdobeXDを布教した話

ノンデザイナーが全社にAdobeXDを布教した話

この記事は Adobe XD Advent Calendar 2020 19日目の記事です！

弊社は専門家マッチング事業、オウンドメディア運用支援、ECなどを展開している社員数約40名程度の事業会社です。
約1/3程度がエンジニアやデザイナーといったクリエイティブ系職種で、さらにそのうち3名がデザイナー。そんな中、社内唯一の「マークアップエンジニア」が、全社にAdobeXDを広めた経緯とそのため

もっとみる
さっちゃん

さっちゃん

CSS Nite Shift14「ウェブデザイン行く年来る年」〜今 見直しておきたいCSSの新機能 2020

CSS Nite Shift14「ウェブデザイン行く年来る年」〜今 見直しておきたいCSSの新機能 2020

株式会社ICS 鹿野壮さん

Chromium版Edgeの登場従来までのEdge
・Edge v18まで
・HTML/CSSのレンダリング：EdgeHTML
・JavaScriptの実行：Charka（チャクラ）
・他のモダンブラウザに比べてCSSやJavaScriptの機能が少なかった
Chromium版Edge
・Edge v78〜
・HTML/CSS：Blink（Chromeと同じ）
・Ja

もっとみる
さっちゃん

さっちゃん

CSS Nite Shift14「ウェブデザイン行く年来る年」〜辻ちゃん・ウエちゃんのAccessiブル GoGo!「アクセシビリティ ゆく年来る年 2020」の巻

CSS Nite Shift14「ウェブデザイン行く年来る年」〜辻ちゃん・ウエちゃんのAccessiブル GoGo!「アクセシビリティ ゆく年来る年 2020」の巻

株式会社インフォアクシア 植木真さん／株式会社コンセント 辻勝利さん

アクセシビリティ残念あるある2020対象：41サイト/768ページ/問題点18829件

1. キーボード操作時にフォーカスインジケータが表示されない／5,516件
2. 画像の代替テキストが適切ではない／3,928件
3. 文字色と背景色のコントラストが不足している／1,811件
4. キーボードで操作できない／1,299件

もっとみる
さっちゃん

さっちゃん

CSS Nite Shift14「ウェブデザイン行く年来る年」〜総決算！ 2020年のウェブマーケティング

CSS Nite Shift14「ウェブデザイン行く年来る年」〜総決算！ 2020年のウェブマーケティング

株式会社まぼろし 益子貴寛さん／株式会社サイバー・アシスト 吉村正裕さん

・チャンス到来
　時代が大きく変わるときに「しがらみ」や「既得権益」が壊れる
・マインドチェンジ

コロナ禍・パンデミック（pandemic）というだけでなく、インフォデミック（infodemic）の影響が大きい
・歴史的には「疫病」が人々の価値観や文化のあり方を大きく変えてきた
・コロナ前には、もう戻れない＝ニューノーマ

もっとみる
さっちゃん

さっちゃん

【現場学校04】Session 04「配信に向けた準備」

【現場学校04】Session 04「配信に向けた準備」

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。Session04の今日のテーマは「配信に向けた準備〜ライブ配信本番前の準備と確認」です。

シナリオと絵コンテ全体のストーリー構成
絵コンテはカメラ＋資料のショット数分用意する

進行台本「演者」と「オペレーター」の立ち振る舞い
→　セリフ＋どう進行するか

・シーンごと
・開始時間＆終了時間
・演者アクション（ファシリテー

もっとみる
さっちゃん

さっちゃん

Webアクセシビリティの学校 特別授業

Webアクセシビリティの学校 特別授業

いま私の中で話題のアクセシビリティ。
今回は「デザイン」という切り口の特別授業を受講です。

インクルーシブデザインで“未来の当たり前”をつくる
株式会社コンセント　佐野実生さん

ウェブアクセシビリティは誰かのための特別対応ではない。
ウェブアクセシビリティは可能性を広げる。

アクセシビリティ／インクルーシブを少し意識するだけで、伝えたかったものがもっとより伝わりやすくなる。
制約ではなく、可

もっとみる
さっちゃん

さっちゃん

【現場学校04】ここまでのおさらいと質疑応答

【現場学校04】ここまでのおさらいと質疑応答

「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。2回目と3回目の間の今日は「補講」。ここまでの授業のおさらいと質疑応答回です。

コンセプトメイキングライブ配信の目的：「何のために」を定める

目的を果たすために設定する目標：「何をどうするか」を決める

すべての指標を満たすことは必要ない。
目的に合わせて指標を定める。
→　達成したい指標が満たせるコンテンツを作る
→　目

もっとみる