すべてのカテゴリ

本日は、現在制作中のホームページでHTML・CSSの調整を行いました今回はデザインカンプを見ながら、カードデザインの細かな部分を再現していく作業です。「ここを数px動かすだけで印象が変わる」そんなデザインの奥深さを改めて感じた一日でした。アイコンの位置を微調整今回一番時間をかけたのは、アイコンの配置です。画像を差し替えたことで位置のバランスが変わり、CSSで* `position`* `left`* `top`* `justify-self`などを使いながら、デザインカンプに近づけていきました。数pxの違いでも見た目の印象が大きく変わることを実感しました。リボンデザインもCSSだけで実装カード左上のリボンは、画像ではなくCSSだけで作成しました。特に印象に残ったのが、擬似要素（`::after`）を使ってリボンの先端を作る方法です。今までは画像で作るものだと思っていましたが、CSSだけでもここまで表現できることに驚きました。デザインカンプとの比較コーディングでは「動けばOK」ではなく、デザインカンプを見ながら* アイコンのサイズ* タイトルとの距離* 余白* 線の位置などを何度も見比べて調整しました。細かい作業ではありますが、この積み重ねが完成度につながるのだと感じています。--- 学んだことHTMLやCSSはコードを書くだけではなく、「どう見せるか」を考えることも大切だと改めて感じました。デザインを忠実に再現するためには、1px、2px単位の調整を繰り返すことも少なくありません。少しずつですが、自分でもデザインカンプとの差を見つけられるようになってきたことが今日一番の成長です

本日は、Web制作でカードデザインに使用するリボン装飾をCSSだけで作成しました。一見シンプルなデザインですが、実際に作ってみると「こんな表現もCSSだけでできるんだ！」という発見がたくさんありました。---リボン本体を作るまずは長方形のリボン本体を作成しました。```css.reason-ribbon {  position: absolute;  top: -2px;  left: 12px;  width: 24px;  height: 30px;  background: var(--gold);}```カードの左上に配置し、背景色を設定することでリボンのベース部分が完成します。ここまでは比較的シンプルなコードです。---ポイントは擬似要素！今回一番勉強になったのが、この部分です。```css.reason-ribbon::after {  content: "";  position: absolute;  left: 0;  bottom: -7px;  border-left: 12px solid var(--gold);  border-right: 12px solid var(--gold);  border-bottom: 7px solid transparent;}```最初は「三角形の画像を使うのかな？」と思っていましたが、実は**border**だけで作られています。左右のborderに色を付け、下側だけ透明にすることで、リボンの先端がV字にカットされたような形を表現できます。画像を使わずにここまで表現できることに驚きました！CSSだけで装飾が作

本日はホームページ制作で、HTMLサイトをWordPress化するためのPHP編集を進めました。これまではHTMLやCSSを中心に触ることが多かったのですが、今回はWordPress特有のPHPコードを扱う機会がたくさんありました。特に苦戦したのは、投稿一覧や記事ページの表示部分です。ニュース一覧を表示するために、* get_posts()* foreach* setup_postdata()などを使用しながら、投稿データを取得して表示する仕組みを学習しました。また、* アイキャッチ画像の表示* カテゴリー表示* 投稿日の表示* 記事タイトルの表示などもPHPで動的に表示できるよう調整しました。---WordPressはHTMLだけでは作れない静的なHTMLサイトであれば、一つひとつ手作業で更新する必要があります。しかしWordPressでは、投稿を追加するだけで一覧ページや詳細ページに自動で反映されます。その仕組みを支えているのがPHPです。実際に触ってみると、「なぜこのコードで動くの？」と思う部分も多く、まだまだ勉強が必要だと感じました。---少しずつ理解できるようになってきた最初はエラーが出るたびに焦っていましたが、* PHPの記述場所* WordPress独自関数* ループ処理など、少しずつ理解できるようになってきました。デザインだけでなく、WordPressの仕組みも学びながら制作を進めています。本日はここまで！【before】（HTML）<h2>NEWS</h2><div class="news-item">  タイトル</

本日は、Webサイト制作で使用した装飾パーツについてまとめます。今回は、CSSで平行四辺形のパーツを作成しました。まず、要素自体に `transform: skewX()` を指定することで、通常の四角形を斜めに変形させ、平行四辺形の形を作りました。ただし、そのままだと中の文字まで斜めになってしまうため、内側のテキストには逆方向の `skewX()` をかけて、文字が読みやすいように調整しています。さらに、右上と左下には `::before` や `::after` の擬似要素を使って、小さな三角形の装飾を追加することで作りたい六角形を完成させることができました。擬似要素を使うことで、HTML側に余計なタグを増やさずに、CSSだけでデザイン性のあるパーツを作ることができます。今回のような小さな装飾でも、サイト全体の雰囲気に合わせて形や色を調整することで、デザインの統一感を出しやすくなります。CSSだけで図形を作れるようになると、画像に頼らずに細かい装飾を表現できるので、今後の制作でも活用していきたいと思います。

本日はホームページ制作で、店舗情報セクションのデザイン制作を進めました！店舗の所在地や営業時間、アクセス方法などを分かりやすく整理しながら、見やすさも意識してレイアウトを調整しています。ホームページでは、必要な情報を探しやすいことも大切です。特に店舗情報は来店を検討している方が確認することが多いため、視認性や導線を意識しながら制作を進めました。色によるユニバーサルデザイン本日の色彩検定では、色によるユニバーサルデザインについて学習しました。 ① 見分けやすい色使い区別したい色は、明度差を大きくしたり色相を調整したりすることが重要です。また、色覚特性の違いによって区別しづらい色の組み合わせは避ける必要があります。例えば、* 青 × 黒* 黄 × 白のように明度差が小さい配色は見分けにくくなります。さらに、色相・明度・彩度が近い色同士を使用する場合は、間に境界線（セパレーション）を入れることで見分けやすくなります。--- ② 色以外の要素を活用する色だけで情報を伝えようとせず、* 大きさを変える* 形を変える* 模様を入れるなどの工夫も有効です。色を塗る部分にパターンを加えることで、色覚特性のある方にも情報が伝わりやすくなります。--- ③ 言葉で補う色付けした部分には、色名や説明文を併記することも大切です。色だけに頼らず、文字でも情報を伝えることで、より多くの人に伝わるデザインになります。---ホームページ制作でも、「自分には見やすい」ではなく、「できるだけ多くの人に伝わるか」という視点を持つことが大切だと感じました。本日はここまで！

デザインカンプ制作中です！本日はホームページ制作案件のデザインカンプ作成を進めていました。今回の案件では、単純に見た目を整えるだけではなく、・信頼感・親しみやすさ・遊び心といった複数の要素をどのようなバランスで表現するかを意識しながら制作を進めています。特にホームページのファーストビューは、サイト全体の印象を決める重要な部分です。使用する写真や配色、フォント選びによって雰囲気が大きく変わるため、何パターンも検討しながら方向性を探っています。また今回は、Photoshopを使ってデザインカンプを作成しており、実際にコーディングすることも想定しながら、・余白の取り方・コンテンツ幅・スマホ表示時の見え方なども考慮しながら制作しています。完成形をイメージしながらデザインを組み立てていく工程は難しさもありますが、その分とても勉強になりますね！引き続きクライアント様に喜んでいただけるサイトを目指して頑張ります✨

最近あらためて感じているのは、作ることと同じくらい、届けるところまで整えることも大事だということです。やさしい雰囲気のキャラクターや世界観を形にするのが好きで、少しずつ整えながら動いているのですが、今回はオリジナルキャラクター「ゆめり」のLINEスタンプを販売開始するところまで進めることができました。制作して、申請して、審査を通して、販売開始する。この一連の流れを自分で経験できたことは、自分にとってかなり大きかったです。実際に販売開始したスタンプはこちらです。ただ作るだけではなく、どんな雰囲気で見せるか、どんな言葉にすると伝わりやすいか、どう整えると使いやすくなるか。そういう部分まで含めて考えることが、やっぱり大切だなと感じました。今回のスタンプでは、感謝の気持ち、寄りそいの言葉、やさしいあいさつなどを、ふんわりした世界観の中で形にしています。強すぎず、でもちゃんと伝わる。そんな見せ方を意識しながら整えました。最近は、こうしたやさしい世界観のLINEスタンプ制作や、キャラクターの見せ方づくりにも力を入れています。「こんな雰囲気で作ってみたい」「まだぼんやりしているけれど、やさしい感じに整えたい」そんな段階からでも大丈夫です。はっきり固まっていなくても、整理しながら少しずつ形にしていけるのが、この作業のよいところだと思っています。もし、やさしい雰囲気のLINEスタンプを作ってみたい方や、オリジナルキャラクターをスタンプにしてみたい方がいましたら、お気軽にご相談ください。ふんわりしたイメージからでも、一緒に整えながら進めていけたら嬉しいです。これからも、作って終わりではなく、届ける

やわらかく、あたたかみのある雰囲気をテーマに、美容院のWebサイト（サンプル）を制作しました。デザイン写真をメインに使うことでサロンの空気感や居心地の良さが伝わるように工夫しています。スタイル写真や店内の風景など、見ているだけで「行ってみたい」と感じてもらえるようなビジュアルの見せ方を意識しました。レイアウトスマートフォンの画面でもストレスなく見られるよう、ベーシックでシンプルな構成に。スクロールのしやすさや文字の読みやすさ、画像の見せ方にも気を配っています。また、予約フォームへの導線も自然に目に入るように配置し、ユーザーが迷わず次のアクションにつなげられるように設計しています。過度に目立たせるのではなく、「使いやすさ」と「押しつけがましさのなさ」のバランスを大切にしています。なお、実際の制作では、クライアントさまのご希望やお店の世界観に合わせて、色味や写真の雰囲気、導線の設計なども柔軟に調整しています。ヒアリングを通して、魅力が自然と伝わるWebサイトになるよう丁寧に進めていきます。今回のサンプルは、あたたかみを感じるデザインをご希望の方にとって、ひとつの参考になればうれしいです。【ページ構成】トップページ＋サブページ4ページ【制作期間目安】 約3週間【制作費用目安】 ¥100,000～※サーバー・ドメイン契約・更新費用はお客様ご負担となります。

Twitter（現Twitter）上での作曲企画「深夜の2時間DTM」への参加作品の制作記録。スパイ映画っぽく。 方針即決。 早速作業。 しかしスパイというよりは、カウボーイが荒野を行くような雰囲気になってしまった。どうしてこうなった。 しばらく試行と錯誤を繰り返すが、どうにもならなさそうなので、早々と撤退。ここで下手に粘っても時間をロスするだけでロクな結果にならないことは学習済み。流石天才。 ひとまずベースラインを書く。半音進行で怪しげに。 うむ。怪しげになった。 ドラムパターンを追加して、ピアノを白玉で置く。 うむ。さらに怪しげが増した。いいぞ。 トランペット投入。短い音価でパーカッシブなフレーズを。トロンボーンも追加。金管二本を適当にインターバルを離して配置。 途中でピアノベースドラムのパターンを変化させて展開を付ける。前半は抑え目だったが、ここからは勢いをつけて。 トランペットは細かい音符で動かして、トロンボーンはロングトーン主体で対称的に。 そのままの勢いで突っ走り、そしてジャーンと7th系で鳴らしてエンディング。 今回の作業時間は約90分。 序盤で迷走したのと、金管のフレーズを書くのに少し迷ったが、まあまあのデキなのではないか。 こうしてまたひとつ名曲が誕生した。

Twitter（現Twitter）上での作曲企画「深夜の2時間DTM」への参加作品の制作記録。金銀キラキラ カノンコード なぜかカノンコードにはキラキラしたイメージがある。 といわけで今回の構成はこれで即決。 正確にはカノンコードを少し変形させた進行を某Jpopから拝借。 エレピでベースラインとアルペジオ。 ドラムはシンプルな8th feel notes. ベースも8分音型で、やや上下に動く。 ストリングスも四声で入れちゃう。ピアノの音域を上下から挟むように。 オケができたのでメロディ作成。 キラキラした音色といえばビブラフォン。これしかない。 さっくりとメロディを書く。 ここで完成としてもよかったのだが、やはりもう一つセクションを追加することに。 今作ったところはサビっぽい雰囲気だから、Aメロを作ろう。 まずはコード進行から。 ここで変に捻ったことをしようとして時間をロスするパターンを何度か経験しているので、「シンプルに、シンプルに」と自分に言い聞かせながら作業。 シンプルなコード進行ができた。 ピアノは白玉主体で装飾的に軽く動く。 ベースも同様に。 ドラムは8th feel notes. ストリングスは二声に減らす。 サビ部分との対比・変化を意識。 オケに乗ってビブラフォンでメロディをサクッと書く。 サクッと書けたのだが、サビとの差があまり感じられない。ので両者を手直し。 ヨシ。 これにてキラキラした金銀財宝っぽい曲が完成。作業時間約90分。くらい。 今回はAメロのコード進行とストリングスのつけ方に少し迷ったが、他は比較的スムーズにいった。 さらに作業時間を短縮できないだろ

Twitter（現Twitter）上の企画「深夜の2時間DTM」への参加作品制作記録。自分くらいの天才になるとありとあらゆるジャンルの音楽が得意分野になってしまうのだが、ここは初心に帰ってピアノトリオジャズで。手早くピアノベースドラムの3トラックを立ち上げる。この後はコード進行を決めてベースのウォーキングラインを作って、と、手慣れた作業を積み重ねていけばすぐに一曲完成するはず。これなら15分くらいでできそうだ。 ところが。 3m 2b 2m 5というちょっと捻ったコード進行を設定した時点で迷いが生じた。 この4つをひたすら回すか、展開させるか。 ひとまず書いたリズムパターンをループ再生しながら考える。 しばらく考える。 4つ回しは違うな。少なくとも今回は違うな。 結論が出たところでコードを展開させることにする。 しかしここでどのように展開させるべきか。 定番の進行を幾つか当てはめてみるが、どうもしっくりこない。まったく合っていない、わけではないのだが、何かが違う。と、自分の中の天才がささやく。 あれやこれやと試行に錯誤を積み上げて、どうにかコード進行を決定。妙にこだわったせいでずいぶんと時間が掛かってしまった。 コードさえ決まればあとの工程は一直線。 ピアノをそれっぽく書いて、ベースをそれっぽく書いて、ドラムをそれっぽく書く。 これでそれっぽいピアノトリオジャズの完成。 最初から定番鉄板のコード進行だけを使っていたら2,30分くらいで完成していただろうが、結局90分ほど掛かってしまった。展開のさせ方をもっと学ぼう。 こうしてまたひとつ名曲が誕生した。