デザイン

教室紹介パンフレットをリニューアルしました 教室からのお知らせ

教室紹介パンフレットをリニューアルしました

表紙は、スマホとパソコンの二種類にしました。中身はこんな感じ（12ページ）今回は、見開きを意識して文字を大きめに配置しました。ビフォー・アフターどんな内容をどんな順番で伝えるかは、ひらまりさんのセミナーのおかげでスッキリ整理できました。店頭に置くので、表紙のメッセージ性を強くしました。内容もなるべく読む順番をわかりやすいように、目線の誘導を意識しました。今回はすべてCanvaで作りましたどのパソコンでもスムーズに編集できるように、オンラインツールのCanvaでデザインを作りま...
2024.06.07
教室からのお知らせ
[Cocoon] ブログカードのラベルを小さくしたけど とりあえずのメモ

[Cocoon] ブログカードのラベルを小さくしたけど

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。そこで、ラベルの大きさを少し小さくしてみました。/** ブログカードのラベルを小さく 2024-05-19 */.blogcard-label { top: -22px; left: 0px; padding: 0px .6em;}Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。しかし、スタイルシートを変更して表示を確認したところ、予想と異なる...
2024.05.19 2024.08.08
とりあえずのメモホームページ運用
[Electron]今日の日付カレンダーアプリを作った（Calectron） とりあえずのメモ

[Electron]今日の日付カレンダーアプリを作った（Calectron）

Electronを使用して、Windows 7のガジェットにあったカレンダーのようなアプリケーションを作成しました。このアプリケーションは、今日の日付と曜日を表示するだけのシンプルなものです。macOS風にデザインを変更し、タイトルバーを削除して、ウィンドウ全体をドラッグできるようにしました。Windows 7のカレンダーのようなアプリを作ったElectronで Windows 7の「ガジェット」にあったカレンダーのようなものを作りました。ただ、今日の日付・曜日を表示するだけ...
2024.05.13 2024.08.19
とりあえずのメモプログラミング
良いニュースと悪いニュースの伝え方（バッテリ充電制御ユーティリティ） ちいラボエッセイ

良いニュースと悪いニュースの伝え方（バッテリ充電制御ユーティリティ）

富士通の古いパソコンを使っている方で「バッテリー充電制御ユーティリティ」の通知を見て、「使い続けてよいのか心配」という相談がよくあります。実際にはメッセージをよく読むと、据え置き状態で使う分には問題ないことが書かれています。しかし、事務的な文章で読みにくいのです。ソフトウェアからの通知も、ユーザーとのコミュニケーションの一つ。デザインを工夫して適切に伝えることが大切だと感じました。バッテリーが劣化して危険なの？「古いパソコンに表示が出てきて、このまま使っても大丈夫か心配」とい...
2024.05.11
ちいラボエッセイスマホはじめてパソコン基礎知識
うまく伝えるためのレシピ （ひらまりさんの「売れるチラシの作り方」セミナーが良かった） #非営利

うまく伝えるためのレシピ （ひらまりさんの「売れるチラシの作り方」セミナーが良かった）

広告プランナーの ひらまり さんの「売れるチラシの作り方」Zoomセミナーを受講しました。チラシ作りだけでなく、情報の伝え方全般にわたって参考になったので、後半に自分用のメモをまとめておきます。自分なりの理解なので、ひらまりさんのセミナーの構成とは順不同で、ニュアンスも違っています。オリジナルにご興味がある方は、Xの「ひらまり🌼広告プランナー（hiramari8）」さんをフォローしてみてください。ひらまりさんの「売れるチラシの作り方」Zoomセミナーとは？今回 参加を決めたの...
2024.05.03 2024.06.07
#非営利ちいラボエッセイ
黒はNG？目に優しい色の選び方 Word・Excelなど

黒はNG？目に優しい色の選び方

デザインにおいて色の選び方は、メッセージの伝達や視覚的な魅力に直接影響します。しかし、色の選択には注意が必要です。「うるさいデザイン」を「優しい配色」にしていくと、メッセージが素直に伝わりやすいなります。これだけが正解というわけではないです。「デザインを優しくしたいな」と思ったときの参考になれば。なぜ黒（#000）を避けるべきなのか（基本の文字色）黒（#000）は、その絶対的な濃さにより、目に負担をかける可能性があります。特に背景色として白と組み合わせると、コントラストが強く...
2024.02.01 2024.02.02
Word・Excelなどとりあえずのメモホームページ運用作業効率化冊子テキスト
ポップ体フォントの定番なら？【モッチーポップ と けいふぉんと！】 Word・Excelなど

ポップ体フォントの定番なら？【モッチーポップ と けいふぉんと！】

パソコンで作ったチラシでよく見る「HG創英角ポップ体」。独特の「素人感（手作り感）」で使いやすいのですが、似たフォントで Windows PC 以外でも使えるものはありますか？「HG創英角ポップ体」をフリーフォントで代用したいなら、「モッチーポップ」と「けいふぉんと！」が有力です。実は、多くの漢字はゴシック体からの流用ですが、かな混じり文だとちゃんとポップ体の印象になります。ポップ体のフォントポップ体って ちょっとオシャレ感は薄いけど、縁日とかのチラシだったりするとかえって安...
2023.05.03
Word・Excelなどとりあえずのメモ相談と回答
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...
2020.09.26
ニッチな話題ホームページ運用
タイトル見出しにアニメーションをつけてみた 【CSS animation】 ニッチな話題

タイトル見出しにアニメーションをつけてみた 【CSS animation】

タイトル見出しを大きく表示するようにしたので、アニメーションで表示するようにしてみました。基本的なアニメーション部分の構造をみる見出し全体のフェードインと、上下の線の伸びるエフェクトの２つが組み合わせています。CSSの中でフェードインの部分だけを抜き出してみます。/* 見出しをフェードイン */h1.entry-title { animation: title-fade-in 0.5s ease 0.8s 1 normal running forwards;}@keyfram...
2020.09.19 2020.11.09
ニッチな話題ホームページ運用