すべてのカテゴリ

本日はデモサイトの制作を進めました！今回は主に「COMPANY（会社概要）」と「CONTACT（お問い合わせ）」セクションのPCデザイン部分を制作しました。COMPANYセクションでは、会社情報が見やすく伝わるように、写真と会社概要を左右に配置したレイアウトを採用しています。情報量が多くなりがちな会社概要ですが、余白や罫線を調整しながら、シンプルで見やすいデザインを意識しました。また、CONTACTセクションでは、「お問い合わせ」「LINEクーポン」「資料請求」の3つの導線をカード形式で整理しています。サイトでは、お客様によって求めている情報が異なるため、・まずは相談したい方・LINEで気軽に情報を受け取りたい方・資料を見て検討したい方それぞれが迷わず目的のページへ進めるような導線設計を意識しました。まだPC版の制作段階ですが、少しずつサイト全体の形が見えてきて完成が楽しみです！今後はスマートフォン表示への対応を行いながら、ホバーアニメーションやスクロール時の演出なども追加し、より見やすく使いやすいサイトへ仕上げていきたいと思います。引き続き頑張ります！

こんにちは、HANAです🌸今回のカフェサイトは、「写真を差し替えるとどのようなイメージになるか」を分かりやすくお伝えするため、ChatGPTを活用してデザインイメージを短時間で作成しました。通常、このようなイメージを一から作成する場合は、写真の選定や差し替え、レイアウト調整などに多くの時間がかかります。今回は「写真を変更するとホームページの印象がどれくらい変わるのか」をお伝えしたかったため、AIを活用してデザインイメージを作成しています。なお、お客様からご依頼いただくホームページ制作では、AI任せではなく、一つひとつデザインやコーディングを行い、WordPress化やレスポンシブ対応なども含めて丁寧に制作しております。デザインやレイアウトはそのままに、写真や文章、配色を変更するだけでも、ホームページの印象は大きく変わります。今回変更したのは、メインビジュアルABOUTNEWSMENU（サービス）SHOP INFOなどの写真です。住宅の写真をカフェの写真へ変更することで、まったく違う業種のホームページのような雰囲気になりました。写真選びはホームページの印象を左右しますホームページでは、デザインだけでなく写真もとても重要です。例えば…温かみのある店内写真バリスタがコーヒーを淹れている様子スイーツやドリンクの写真パンやランチメニュー外観やテラス席こうした写真を取り入れることで、そのお店の雰囲気や魅力を自然に伝えることができます。レイアウトはそのままでも応用できます今回のデモサイトでは、レイアウト自体はほとんど変更していません。写真・テキスト・アイコンを差し替えるだけで、カフェパン屋美

【学習2ヶ月目のリアル】未経験からWebデザイン案件へ挑む。私の背中を押したのは「AI」と「過去の蓄積」だったWebデザインのオンラインスクールを受講し始めて約2ヶ月。独学では「何をどこまで学べばいいか」分からず暗闇を歩くようでしたが、今はカリキュラムがあり、メンターやインストラクターの方々の導きにより、レールの上を効率よく走り抜けている実感があります。現在はFigma、HTML・CSS、GitHub Pagesでの公開方法を習得し、次はJavaScriptやWordPressという新たな山に挑むところです。0からのスタートを支えた「3年前の種まき」最近、クラウドソーシングサイトで「タスク案件」から一歩踏み出し、「コンペ」や「プロジェクト案件」に挑戦し始めました。驚いたことに、まだ契約には至りませんでしたが、ある企業様から直接ご連絡をいただく機会がありました。実績ゼロの私がなぜ目に留まったのか。それは、3年前から積み上げてきた「画像生成AI」の経験と、YouTubeへの動画投稿がポートフォリオとして機能してくれたからです。「点と点が繋がる」とはまさにこのこと。現在はココナラで動画制作や漫画制作案件に応募しつつ、他サイトでもコンペへの投稿を本格化させています。2026年、私の生活を変えた「マルチモーダルAI」活用術ここで、私が日々実践している**「AIを使いこなすポイント」**を少しだけ共有します。2025年2月に登場した「NotebookLM」は、私の生活を劇的に変えました。今のAIは、単なるテキストのやり取りを超え、画像や音声を完璧に理解する「マルチモーダル」な存在です。私が

本日のブログは、新しいサービス準備としてホームページ制作を進めました✨現在、「やさしく伝わるデザイン」をテーマに、自然光や余白感を意識したファーストビューを制作中です☺️写真の色味や空気感を調整しながら、少しずつ理想の雰囲気に近づいてきました🌿そして本日の色彩検定学習では、「ランプの種類と発光の仕組み」について学習しました💡■熱放射による発光・ハロゲン電球・高圧ナトリウムランプ■高圧放電・水銀ランプ・メタルハライドランプ・高圧ナトリウムランプ■低圧放電・低圧ナトリウムランプ・蛍光ランプ■エレクトロルミネセンス・LED■フォトルミネセンス・蛍光ランプ・白色LEDランプにもさまざまな発光の仕組みがあり、普段当たり前に使っている照明にも、たくさんの技術が使われていることを知れて面白かったです✨Webデザインでも、「見え方」や「空気感」はとても大切なので、色彩の知識もしっかり活かしていきたいと思います☺️

本日のトピック激動の2月：退職と学習開始、そして決断なぜ「今」ポートフォリオが必要だったのかClaudeで実践！爆速ポートフォリオ作成術シンプルから「魅せる」へ：ブラッシュアップの記録激動の2月：退職と学習開始、そして決断2026年2月。私は退職という大きな転機を迎え、オンラインでWebデザインの世界に飛び込みました。Figma、HTML/CSS、そしてJavaScript。 学ぶべきことは山積みでしたが、生活もまた、変化の連続でした。引越し、社会保険の任意継続、傷病手当の手続き。そして何より、妻の体調不良による通院の付き添い。正直、目が回りそうな毎日でしたが、そんな時だからこそ「学習に全振りする」という決断をして本当によかったと感じています。この集中力が、後に大きな成果を生むことになります。なぜ「今」ポートフォリオが必要だったのかcoconaraやクラウドワークスで活動を始めると、必ずと言っていいほど求められるのが**「ポートフォリオ」**です。最初は「プロフィールを充実させれば十分では？」という迷いもありました。しかし、Webデザインの世界で実績ゼロの私が自分を証明するには、学習中に作った作品を形にして提示することが、案件獲得への一番の近道だと気づいたのです。インストラクターさんに相談したところ、「カリキュラムを繰り上げて作ってみよう！」と背中を押していただき、私のポートフォリオ制作がスタートしました。Claudeで実践！爆速ポートフォリオ作成術今回、制作の相棒に選んだのは、今話題のAI**「Claude（クロード）」**です。驚くほど簡単に土台を作ることができました。【作

今回は、WordPressで「テキストの左側に余白を入れたいのにCSSが効かない…」という場面に遭遇したので、その解決方法をまとめます。---  ■ やりたかったこと 2カラムレイアウトで、 * 左：動画 * 右：テキスト という構成にした際に、 👉 テキスト側の左に少し余白を入れたかった ---  ■ 最初にやったこと（うまくいかなかった） とりあえず追加CSSで ```css .wp-block-column:nth-child(2) {   padding-left: 20px; } ``` を入れてみましたが… 👉 　全く効かない---  ■ 原因 原因はシンプルで、 👉 HTMLに直接CSSを書いてしまっていたこと実際にはこんな感じになっていました👇 ```html <div class="wp-block-column is-vertically-aligned-top .wp-block-column:nth-child(2) { padding-left: 20px; }"> ``` これでは当然CSSとして認識されません。 ---  ■ 解決方法①：追加CSSクラスを使う WordPressのブロックには「追加CSSクラス」を設定できるので、これを使います。  手順 1. テキスト側のカラムを選択 2. 「高度な設定」→「追加CSSクラス」にクラス名を入力 例： ```text text-padding ``` ---  ■ 解決方法②：CSSを追加 外観 → カスタマイズ → 追加CSSに以下を記述 ```css .text-padding {