2023-02-18

操作解説動画・Gifアニメ作成に便利なMacアプリ「Screen Studio」

このツイートを見て知りました。

これはすごいな。画面収録の概念が変わる。 pic.twitter.com/wXnN0hIPJ2
— usagimaru ⌘ (@usagimaruma) 2023年2月14日

↓ 次の動画は、私がScreen Studioを使って数分で撮影・編集・エクスポートしたGifです。

↓ 次のツイートもScreen Studioでエクスポートした動画が使われています。

I wrote the first Screen Studio line of code on September 13, 2022.

I hope it'll allow many of you to promote your digital content easily and in a way you'll be proud of.

I also hope it'll be a success for me, whatever it will mean. In many ways, it already is my success. pic.twitter.com/ovu8R7mO41
— Adam Pietrasiak (@pie6k) 2022年11月8日

ダウンロードはこちらから。

www.screen.studio

料金

Standard $89: 1 macOS device
Extended $139: 3 macOS device
Teams 要問い合わせ: Seat（人数）ごと

無料版でできないのは、撮影・編集したデータの「書き出し」です。ほとんどの機能が無料で試せます。

特徴

指定したウィンドウ上の操作を録画。クリック操作などに応じて、カーソルへのズームなどを「いい感じ」に設定してくれます。そこから、どのタイミング・位置でズームするかの微調整も簡単。

スタートアップのPR担当者や、YouTube Short、TwitterなどSNS上のインフルエンサーなど。Webサービスのハウツー発信中心に、活躍の幅が広そうなアプリです。

私も今後、ツール詳細でテキストで伝えにくい部分はScreen Studioを使ってみようと思います。

細かい機能

2023-02-13

はてなブログテーマ「Ryucho」でヘッダーにアイコンを表示するデザインCSS

タグ-はてなブログ

デザインCSSのTipsです。テーマのインストールはこちらから。 blog.hatena.ne.jp

次のコードを、デザインCSSに追記してください。

#blog-title {
  position: relative;
  padding-left: 78px;
  text-align: left;
}
#blog-description {
  margin: 2px 0 0;
}
#blog-title-content #title a::before {
  position: absolute;
  overflow: hidden;
  border-radius: 15%;
  left: 0;
  width: 64px;
  height: 64px;
  content: url('//cdn.profile-image.st-hatena.com/users/rokuzeudon/profile.png');
}

rokuzeudon の部分は、ご自身のアカウントIDに置き換えてください。

ちなみに私は、自前のレンタルサーバーにアップした画像を使い回すため、下記コードにしています。

#blog-title {
  position: relative;
  padding-left: 70px;
  text-align: left;
}
#blog-description {
  margin: .2em 0 0;
}
#blog-title-content #title a::before {
  position: absolute;
  overflow: hidden;
  border-radius: 15%;
  top: -200px;
  left: -198px;
  transform: scale(.12);
  content: url('//data.rokuzeudon.com/portfolio/img/rokuzeudon-icon.png');
}

はてなブログの「profile.png」は64pxに対し、自前画像は390pxとだいぶ大きいので、transformプロパティでサイズ縮小しつつ top, left プロパティで位置調整しています。

2023-02-12

自分のポートフォリオサイトをBento風にリデザインしてみた

活動活動-自主制作・開発

STUDIOで制作〜公開中のポートフォリオサイトをリニューアルしました。
ろくじゅうどデザイン

きっかけは、海外で流行りつつある、プロフィールサイト作成サービス「Bento」を見たこと。Bentoは招待制で、利用にはInvite Codeが必要です。こちらから既に公開されているサイトを閲覧できます。

bento.me

サービス自体は、ブロックを組み合わせて自分のページをつくる...というシンプルな仕組みです。ユーザーがその中で工夫し、それぞれユニークで魅力的な紹介ページに仕上げています。

「自分の場合はどうするだろう」と、STUDIOの練習も兼ねて今回ポートフォリオのデザインに取り入れてみました。

実装内容

私の場合、主に仕事用のアカウント（本名・屋号）と、趣味用のアカウント（rokuzeudon）とがあり、それぞれ分けてレイアウトしました。

Bentoの場合、ブロックが画面幅に応じて伸縮するのですが、STUDIOでは縦横比を維持した拡大縮小が通常できません。そのためだけにハック的な実装をするのは億劫だったので、モバイルサイズではブロックが横長になるよう調整しています。

STUDIO上ですから、「仕組み」にとらわれず、要素を自由に追加できます。登壇や寄稿といった、過去の活動の「ピックアップリスト」を下部に配置しました。

ちなみに、以前ポートフォリオはこんなデザインでした。

余談

Bentoを眺めていると、さらにREAD.CVというサービスも見つけました。
※CVとは、英文履歴書のこと

これらのサービスを眺めていると、様々な職種・立場の人が自分の実績をどのようにまとめ、発信しているか学べます。魅力的なポートフォリオサイトを実装し独自ドメインで公開している方も多かったです。自分のサイトにも、学びを随時取り入れていきたいですね。

2023-02-12

はてなブログテーマ「Ryucho」を公開しました

活動活動-自主制作・開発

blog.hatena.ne.jp

レスポンシブ対応
サイドカラムを左に配置し、かつスクロール追従（sticky）するようにしてみた
リンクとカテゴリモジュールでは、はてなブログのアイコンフォントを使ってみた
テキストリンクは全部下線をつけた

Twitterの先行きが怪しく、Webでの発信・アプトプットの中心が、何らかのブログやコミュニティへと移る日が来るのかもしれません。
note、Zenn、Qiita、WordPress、そして STUDIO CMS など、ブログ発信のツールはいろいろあります。ただ、趣味の範囲で、頑張らなくてもゆるい繋がりができる、そしてブログいじり（盆栽活動）を手軽に楽しめる、となるとはてなブログかなあとこうして触っています。

私にとって、ブログを書くハードルのひとつが「サムネイル画像」でした。
UnderShirt は好きなテーマですが、サムネイルありきのデザインです。

「Ryucho」はとてもベーシックです。角丸など調整はありますが、Hatena-Blog-Theme-Boilerplateをベースにして大きな手は加えていません。着手から公開まで1日もかかりませんでした。

文章中心の気楽なブログでも扱いやすいかなと思っています。
もし利用いただいて気になる箇所あれば、DMなりコメントなりで気兼ねなく教えてください。