日本テレビ系ドラマ「セクシー田中さん」の原作者で漫画家の芦原妃名子さんが亡くなられました。 とても悲しいです。 漫画を原作とした映像化のトラブルということで、僕の名前を思い出す人も多かったようです。 日テレ「セクシー田中さん」だけではない…意外と多いテレビ局と原作者のトラブル、「海猿」は未だ二次使用できず、「のだめ」で揉めたTBS 再放送もない「海猿」 「テレビ業界で最も騒がれた原作者とのトラブルは、連ドラだけでなく4度も映画化された佐藤秀峰氏の漫画『海猿』です。 最初にドラマ化したのはNHKで、国分太一の主演で02年に放送された『海猿～うみざる』（BS hi）でした。 その後、04年にフジが伊藤英明の主演で映画『海猿　ウミザル』を公開し、翌年に放送された連ドラ『海猿 UMIZARU EVOLUTION』は平均視聴率13・2％を記録。 映画2作目『LIMIT OF LOVE 海猿』は興収7

ホットクック使い始めて1週間くらいなんだけどねマジでフルタイム勢全員買った方がいい。優勝すぎる。これは革命すぎる。体感1時間〜2時間は時短になるという記事。コメント欄を見ると「1年ぐらいは使い続けてから利点と欠点を聞きたいところ」というのが目に入ったので、2021年5月から毎日のようにホットクックを使ってる感想を書いてやろうかという気になった。 ホットクックの利点として時短をあげる人は多いし実際そうなのであるが、時短ができるということは人間じゃやってられないような時間をかけた料理が簡単に作れるということでもある。 例えば牛すじ。柔らかくなるまで煮るのは本当にたいへんなのであるが、毎年冬にはスーパーの500gで1000円くらいの牛すじ肉を買ってきてビーフシチューをよく作っている。まぜ技ユニットを取り付けて2時間も煮込めば、安物の硬い牛肉が箸で切れるほど柔らかくなる。歯の悪い高齢者も食べれると

研究発表のスライドの仕上げの目的は、単に見栄えを良くすることではなく、伝えたいことが正しく・詳しく・分かりやすく伝わるようにすることです。スライドの推敲の技術を知って、実践的に身につけましょう。大阪大学大学院の教員であり、2021年10月に『卒論・修論研究の攻略本（森北出版）』を上梓した著者が実例付きで解説します。 スライドの推敲とは？文章がそうであるように、スライドもまた、「伝えたかったこと」をいつでも正しく伝えてくれるとは限りません。そして、正しく伝わるはずだ、という淡い期待を裏切られたときは、本当につらいものです。 文章を推敲するように、スライドにも推敲をかけましょう。ただし、スライドを推敲する際に、単にスライド中の語句を推敲するだけでは不十分です。スライドは、文章とは異なる表現形式だからです。 とはいえ、実は、著者の別記事で紹介した文章の推敲技術は、スライドの推敲にも使うことができ

3 月 12 日に「Interaction to Next Paint」がウェブに関する主な指標に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 3 月 12 日より、「Interaction to Next Paint」が「Core Web Vitals」として正式に採用され、「First Input Delay」の代わりになります。 Web Vitals プログラムでは、ウェブ デベロッパーがウェブ上のユーザー エクスペリエンスの主要な側面を測定するための指標を提供しています。First Input Delay（FID）はプログラムの応答性の要素を示すものでしたが、時間の経過とともに、FID ではなかったウェブでのインタラクティビティの側面を捉えるには新しい指標が必要であることが次第に明らかになりました。Chrome チームはこのニーズを認識し、20

前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使

昨年末に人生ではじめて面接を担当したので、考えたことを書いていきます。 大前提 面接をやるにあたって、個人的に心がけたのは「勘違いしない」ということです。 ネット上で流れてくる人事みたいな人間にはなりたくないな、と。 ただ採用する側になってみて、確かにこれは担当者を勘違いさせる魔力があるなと感じました。 良くないですね。 ただやっぱ採用って組織やチームとしてはめちゃくちゃ重要な活動なので、そこにコミットするのは大切。 特に小さな会社であればあるほど。 前提 今回の採用に関しては、iOSエンジニアの中途採用でした。 新卒採用だったらまた基準は違うと思います。 やるべきこと 面接に臨む前に、履歴書・職務経歴書は熟読しました。 SNSアカウント/Github/ポートフォリオサイトがあれば、それもサラッと見て。 面接そのものは実際そんな大事じゃないのかなと改めて思ったりもしました。 書類からある程

最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h

こんにちは、ちょっと株式会社の久保田です。 Webサイトもグローバル化が進み、自動翻訳機能も精度が向上していることもあって、多くのWebサイトが多言語への切り替え機能を採用しています。 この機能のおかげで海外サイトを気軽に閲覧することができますし、その逆も然りです。 そんな重要度が高まっている言語切り替えUIのベストプラクティスを探るべく、かなり前からコツコツとメモっていたものを「ちょっと株式会社 Advent Calendar 2023」向けにまとめてみました。 かなりボリュームがあるのでお時間の無い方のために先に結論を述べておくと「ベストプラクティスなんて無くて結局はケースバイケース」って極めて曖昧な結論に至ってます。（2023年12月現在） 言語切り替えUIの現状まずは軽くリサーチしてみました。 外国人の利用が多そうな交通機関とかテーマパークとか、海外からのアクセスがありそうな有名企

こんにちわ。 印刷通販オペレーターのＫです (○v艸v*) 今日も印刷屋さんドットコムへ たくさんのご注文、お問い合わせ、ありがとうございます。 HPはこちら 印刷屋さんドットコム ────────────────────────── 今日はお客様からお問い合わせをいただきました。 イラストレーターでデータを作ったそうです。 入稿用データは文字のアウトライン化が必須。 しかし… どうしてもアウトライン化したくない理由があると言うのです。 さて、その理由とはなんでしょう？ ────────────────────────── 「アウトライン化すると文字が太るから嫌なんです」 アウトライン化すると文字が太る？ そんなことってあるのでしょうか？ ────────────────────────── アウトライン化をすると、確かにモニターでも若干太って見えます。 ↑この画像では分かりにくいかもしれ

この記事ではそもそもアウトライン化とは、アウトライン化する方法、アウトライン化できない場合の対処方法など、イラレ初心者にもわかりやすく「アウトライン化」について徹底的に解説しています。 イラレのアウトライン化とは イラレの文字のアウトライン化とはテキスト状態の文字データなどをパス化させる機能のことを言います。 見た目では判別が付きづらいですがテキストデータであるか、パスデータであるのかが１番の違いになります。 イラレデータを入稿したり、別のPCで作業をするなど、PC環境を変えた時に指定されていたフォントがそのPC環境にないと表示ができない、又は別のフォントに置き換わってしまう事態が起こってしまいます。 なので文字が意図したデザインのフォントと変わってしまうのを防ぐために、テキストデータ状態を捨て、パスデータに変換する必要があり、アウトライン化が生まれました。 文字をアウトライン化するメリッ

企業やサービス、商品などの優れたキャッチコピーを集めてみました。クリエイターやコピーライターの方の参考になると思います。

ビュートランジションは、ユーザーがアプリケーションの状態またはビューの間を移動する際に、ユーザーの認知的負荷を縮小し、コンテキストにとどまることを支援し、読み込み待ちの知覚時間を短縮するための有力な設計の選択肢です。 しかし、ウェブ上でビュートランジションを作成するのは、過去には困難なことでした。単一のページアプリ (SPA) で状態間の遷移を行うには、かなりの CSS と JavaScript を書かなければならない傾向があります。 古いコンテンツと新しいコンテンツの読み込みと位置決めを処理します。 古い状態と新しい状態をアニメーション化して、トランジションを作成します。 古いコンテンツを誤ってユーザーが操作して問題が発生しないようにします。 トランジションが完了したら、古いコンテンツを除去します。 また、新しいコンテンツと古いコンテンツが同時に DOM に存在することで、読み上げ位置の

CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ

Baseline （ベースライン）は、ブラウザー間で動作するウェブプラットフォームの機能を確認します。Baseline は、サイトの訪問者に互換性の問題を引き起こす可能性が低くなった時期を示すことで、その機能を使用するタイミングを決定するのに役立ちます。 API、一連の CSS プロパティ、JavaScript 構文などの Baseline 機能は、Chrome、Edge、Firefox、Safari など、デスクトップやモバイルで広く使われている有名なブラウザーで一貫して動作します。 Baseline 機能とは、現在の安定したブラウザーで新たに利用可能になったか、あるいは長期にわたる継続的なサポートにより広く利用可能になった機能のことを言います。 Widely available である Baseline バッジが表示されている場合、その機能は各 Baseline ブラウザーで一貫してサ

Intro As a user, you need to interact with clickable UI elements like buttons, links, cards, and more. If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake. Let’s take a look at the following example.