さっちゃん

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設計が必要か？・バグを抑える ・サイトの寿命を伸ばす ・サイトの改善スピードを速める 主なCSS設計・OOCSS 　→　ストラクチャーとスキンの分解 　→　コンテナとコンテンツの分離 ・SMACSS 　→　CSSを5種に分類 ・BEM 　→　Blockを基本単位とし、その子要素となるElement、 　

さっちゃん

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

      「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはトラブル対策とリスクマネジメント（後編）。現場で発生しがちなトラブル事例を赤裸々に教えていただきます！ 前編の板書はこちら 現場で発生しがちなトラブル事例 ・カメラのメニュー表示 　→　撮影しているカメラのメニューをOFFにし忘れる 　→　オートスリープの復帰時にメニュー表示が戻る場合があるので要注意 　→　カメラごとの表示ON/OFFを注意する ・イマジナリーライン 　→　カメラと演者

      さっちゃん

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

        「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはトラブル対策とリスクマネジメント（前編）です。 すべてのトラブルは人が招く機器トラブルも事前確認で回避できることもあるので要注意。 最低限ここだけは注意しよう！ カメラ ・明るさとホワイトバランス 　→　明るくしすぎない／白の基準 　→　自分が意図したものに対して、ナチュラルで違和感がないように 　→　同じ機器でも機材の個体差があるので複数台使う場合は要注意 　→　ホワイトバランスは編集

        さっちゃん

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

          数百万人規模のアプリリニューアルで実践した失敗しないテクニック 株式会社メンバーズポップインサイト カンパニー　CX/UXストラテジスト／岡 昌樹さん リニューアルで私たちは何を一新したいのか？ UI／UX／システム／オペレーション／ぜんぶ・・・ 失敗例 ・UIが古くなった 　→　目的がはっきりしない 　→　UIだけではなくあれこれ触り始めてしまい終わらなくなる 　→　誰の何を解決したいのかが不明確に ・ビジネス的に新しく推したいものがある 　→　ユーザーがやりたいことが

          さっちゃん

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

        さっちゃん

        マガジン

        • CSS Nite
          8本
        • 現場学校04 - 参加レポート
          11本
        • セミナー参加レポート
          24本
        • アクセシビリティのお勉強
          15本
        • AdobeMAX
          2本
        • GAAD Japan 2020 - 自分レポート
          9本

        記事

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

          「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマは昨日に続き、コンテンツのプロモーション（後編）です。 前編の板書はこちら 動画コンテンツのアクセス解析「再生回数」以外にどんな数値を見るか ・再生回数 　→　多ければ多いほど良いというものでもない 　→　来た人がどのくらい興味をもって見続けるか ・平均試聴時間 　→　一般論と比較してではなく、自分のコンテンツでどのくらいの割合見てもらえていればOKかの基準をコンテンツにあわせて決める

          さっちゃん

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

          さっちゃん

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

          「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマはコンテンツのプロモーション（前編）です。 ターゲットユーザーに配信を見てもらうためのステップ・認知（知ってもらう） ・興味 ・欲求 「認知されるだけ（知っているだけ）」では意味がなく、「興味を持ってもらう」ところまでセットで考える 動画配信を活用したプロモーション動画広告のメリット ・情報量：テキストやバナー広告よりもたくさんの情報を詰め込める ・動きと音声 ・滞在時間 ・SNSとの親

          さっちゃん

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

          さっちゃん

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

          基調講演「Webエンジニアとしていま知っておきたいWebアクセシビリティ」 freee株式会社 デザイナー/エンジニア　ymrl さん ウェブアクセシビリティとは何か？ ・アクセシビリティ：あらゆる状況で誰にとっても使えること 　状況を狭く限定して、使いやすさを深く追求する ・ユーザビリティ：特定の状況で特定のユーザーにとって使いやすいこと 　状況を広げることを追求する。使いやすさには比重を置いていない 例えばスマホ最適化 ・あるWebサービスをスマートフォンに最適化した

          さっちゃん

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

          さっちゃん

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

          「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。今日のテーマは昨年の最後にあったSession05の「配信ツール選び」の後編です。 前回のメモはこちら 配信エンコーダーとは？ カメラやマイクの映像（ローカル環境）をインターネットに配信するためのツール。 ハードウェアとソフトウェアの2種類があり、ソフトウェアタイプのものはスマートフォンなどにも搭載されている。 ハードウェア：LiveShell X・PC不要でライブ配信が可能 　→　詳細設定にはP

          さっちゃん

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

          さっちゃん

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

          「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。Session05の今日のテーマは「配信ツール選び」です。 目的に合わせた配信ツール選び あらゆるケースで万能なもの、というのは存在しないので、メリット／デメリットを理解した上で、最適な物を選ぶ必要がある。 ツール事例「LiveShell X」 ライブ配信専用のエンコーダー。Cerevo社のハードウェア。 ・配信専用のパソコンが現場になくてもライブ配信ができる 　→　設定はパソコンから行う必要がある

          さっちゃん

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

          さっちゃん

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

          この記事は Adobe XD Advent Calendar 2020 19日目の記事です！ 弊社は専門家マッチング事業、オウンドメディア運用支援、ECなどを展開している社員数約40名程度の事業会社です。 約1/3程度がエンジニアやデザイナーといったクリエイティブ系職種で、さらにそのうち3名がデザイナー。そんな中、社内唯一の「マークアップエンジニア」が、全社にAdobeXDを広めた経緯とそのためにやったことを徒然と書きます。 突然のディレクター業。あるあるに悩む2018年

          さっちゃん

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

          さっちゃん

          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と同じ） ・JavaScriptの実行：V8（Chromeと同じ） ・他のモダンブラウザと同じだ

          さっちゃん

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

          さっちゃん

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

          株式会社インフォアクシア 植木真さん／株式会社コンセント 辻勝利さん アクセシビリティ残念あるある2020対象：41サイト/768ページ/問題点18829件 1. キーボード操作時にフォーカスインジケータが表示されない／5,516件 2. 画像の代替テキストが適切ではない／3,928件 3. 文字色と背景色のコントラストが不足している／1,811件 4. キーボードで操作できない／1,299件 5. 見出しが適切にマークアップされていない／959件 6. コンテンツの表示

          さっちゃん

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

          さっちゃん

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

          株式会社まぼろし 益子貴寛さん／株式会社サイバー・アシスト 吉村正裕さん ・チャンス到来 　時代が大きく変わるときに「しがらみ」や「既得権益」が壊れる ・マインドチェンジ コロナ禍・パンデミック（pandemic）というだけでなく、インフォデミック（infodemic）の影響が大きい ・歴史的には「疫病」が人々の価値観や文化のあり方を大きく変えてきた ・コロナ前には、もう戻れない＝ニューノーマル →　まだ現在進行形 確実に迫られる4つの「見直し」 ・顧客セグメント：収入

          さっちゃん

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

          さっちゃん

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

          「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。Session04の今日のテーマは「配信に向けた準備〜ライブ配信本番前の準備と確認」です。 シナリオと絵コンテ全体のストーリー構成 絵コンテはカメラ＋資料のショット数分用意する 進行台本「演者」と「オペレーター」の立ち振る舞い →　セリフ＋どう進行するか ・シーンごと ・開始時間＆終了時間 ・演者アクション（ファシリテータ側／ゲスト側） ・オペレータの操作のキッカケになるセリフ（IN/OUT） ・オ

          さっちゃん

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

          さっちゃん

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

          いま私の中で話題のアクセシビリティ。 今回は「デザイン」という切り口の特別授業を受講です。 インクルーシブデザインで“未来の当たり前”をつくる 株式会社コンセント　佐野実生さん ウェブアクセシビリティは誰かのための特別対応ではない。 ウェブアクセシビリティは可能性を広げる。 アクセシビリティ／インクルーシブを少し意識するだけで、伝えたかったものがもっとより伝わりやすくなる。 制約ではなく、可能性。 インクルーシブデザインとは？ 選べる自由があり、一人ひとりにとって嬉し

          さっちゃん

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

          さっちゃん

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

          「ライブ配信のコンテンツ作りに必要なプランニング」を学ぶ現場学校第4弾。2回目と3回目の間の今日は「補講」。ここまでの授業のおさらいと質疑応答回です。 コンセプトメイキングライブ配信の目的：「何のために」を定める 目的を果たすために設定する目標：「何をどうするか」を決める すべての指標を満たすことは必要ない。 目的に合わせて指標を定める。 →　達成したい指標が満たせるコンテンツを作る →　目的と指標が決まったら「誰に／いつ／どこで」を決めていく →　ターゲット（誰に）は

          さっちゃん

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

          さっちゃん