すべてのカテゴリ

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

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

今日はポートフォリオ制作を進めながら、CSSとJavaScriptを使ってサイトの見た目や使いやすさを改善しました。「デザインカンプをそのまま再現するにはどうすればいいのか？」を考えながら、一つひとつ調整を行いました。NEWSセクションのレイアウト調整まず取り組んだのは、お知らせ一覧のデザイン調整です。デザインカンプでは、各ニュースの区切り線が左右の枠線に少し余白を残したデザインになっていました。最初は border-top を使っていましたが、線が横いっぱいに表示されてしまうため、CSSの擬似要素（::before）を使って長さを調整しました。これにより、デザインカンプに近い上品な仕上がりになりました。枠線を二重にする方法を学習ABOUTセクションでは、外側の金色の枠だけでは少しシンプルに感じたため、内側にも細い金色のラインを追加しました。この時に使用したのがCSSの擬似要素です。position: relative; と position: absolute; を組み合わせることで、HTMLを書き換えずに内側の線を追加できることを学びました。CSSだけでデザインの幅が大きく広がることを実感しました。Googleマップのレスポンシブ対応ACCESSセクションでは、画面幅を小さくするとGoogleマップの高さまで小さくなってしまう問題がありました。原因を調べながら、heightaspect-ratiomin-heightなどの違いについて理解を深めました。レスポンシブデザインでは、幅だけでなく高さの指定も重要であることを学ぶ良い機会になりました。ファーストビューをスマホ向けに最

現在、鍼灸院をテーマにホームページを制作しています。 今回はその制作過程として、「デザインカンプ（完成イメージ）」を作成しましたので、制作意図とあわせて解説します。 鍼灸院や治療院のホームページ制作では、 「何をしている治療院なのか」「予約はどうするのか」 が一目でわかることが重要です。 本記事では、今回作成したデザインカンプの考え方と、ホームページ制作の基本的な流れについてもあわせて紹介します。デザインカンプとは？ デザインカンプとは、ホームページ完成後の見た目を具体的に表現したデザイン案のことです。 実装前の段階で、 ・レイアウト ・色使い ・写真の配置 ・ボタンの位置 ・文字の大きさ などを視覚的に確認できるため、クライアントとの認識共有にも役立ちます。 ホームページ制作では、いきなりコーディングに入るのではなく、 カンプを作ることでサイトの方向性を明確にすることが重要です。鍼灸院ホームページのデザイン制作意図 今回の鍼灸院ホームページでは、次のポイントを意識してデザインしました。 視認性の高いキャッチコピー ファーストビューでは、 白背景＋黒文字のシンプルなキャッチコピーを配置しました。 治療院サイトでは、 「誰に向けたサービスなのか」 をすぐ理解できることが重要です。 まずは文字情報をしっかり読ませることで、サイトの目的を明確にしています。 施術中の写真でサービス内容を直感的に伝える キャッチコピーの横には、施術中の写真を配置しました。 文章だけではなく、 ・鍼灸院 ・治療院 ・身体のケア といったサービス内容を、視覚的に理解できるようにすることが狙いです。 訪問者が

左：トップページ中：一部サービスページ右：コンセプトページご相談者さまがご用意された、PCとスマホの各Figmaカンプをもとに、SWELLテーマでの実装を担当いたしました。デザインを共有し、実際のWebサイトにはCSSコーディングを用いて再現していくイメージです。テキストサイズや余白など細部までこだわりをお知らせいただきながら、丁寧に調整していきました。FigmaやCanvaなどのツールでデザインを設計済みの場合、また参考サイトを再現したいというご要望に対しましても、妥協なくご納得いただける形になるまで伴走いたします◎

Web制作やバナー制作の現場でよく出てくる言葉に「デザインカンプ」があります。制作を進めるうえで超重要な資料なのに、なんとなく雰やっと理解している人も多いです。この記事では、デザインカンプとは何かを初心者向けにわかりやすく解説しつつ、実務でどう扱うべきかまで整理していきます。デザインカンプとは？**デザインカンプ（デザインカンプル）**とは、**完成形のデザイン見本（完成イメージ）**のことです。Webサイト制作で言うなら、この色でこのフォントでこのレイアウトでこのボタンの形でこの余白感でという「完成した見た目」を、制作前に確認できる資料がデザインカンプです。デザインカンプで決まっていることデザインカンプには「見た目に関わる要素」が基本的に全部入っています。例えば以下のようなものです。レイアウト（配置）文字サイズフォント余白（マージン・パディング）色（背景色、文字色、ボタン色など）画像の使い方ボタンのデザイン見出しの装飾影や角丸などの細かい装飾つまり、コーディングするときの答えが詰まっている資料だと思ってOKです。デザインカンプが必要な理由デザインカンプがあると、制作がめちゃくちゃ進めやすくなります。1. 完成のゴールがズレなくなる最初に完成イメージが決まっていないと、なんとなく作る途中で方向性が変わる「思ってたのと違う」が起きるという事故が起きやすいです。デザインカンプがあると、完成のゴールが明確になります。2. お客さんと認識合わせができる「このサイト、こんな感じになります！」が口だけだと伝わりません。デザインカンプで見せれば、この雰囲気で合ってるかこの色で問題ないか文字の

「きれいにデザインしたのに、実装でつまずく…」その理由がわからず、モヤっとした経験はありませんか？実は、多くのトラブルは“複雑さに気づけなかったこと”が原因です。この記事では、負荷の高いデザインを早い段階で見抜き、実装トラブルを未然に防ぐための視点をわかりやすくまとめました。1. なぜ「実装負荷の高いデザイン」が生まれてしまうの？参考サイトを再現しようとこだわって作ったのに、公開後に「動きが違う」「崩れている」と指摘される…。そんな苦い経験はありませんか？原因は、デザイナーさんの“感覚”とコーダーが必要とする“仕様”が噛み合っていないことです。この章では、そのズレが生まれる理由と、実装負荷の高いデザインを未然に防ぐ視点を整理します。（１）共有した“つもり”の動きが、実装でズレてしまうデザインが完成し、クライアントと「この参考サイトみたいに動かしたいですね」と盛り上がった直後。あなたは参考サイトのURLをコーダーに渡し、必要な素材も揃えて、内心こう思っていたはずです。――「これだけ情報が揃っていれば、あとは実装してもらえるはず」ところが、納品直前になってクライアントから届く言葉は、どこか冷たいものです。「動きが参考サイトと違います」「イメージしていたより重いですね…」「画面幅を変えると途中で崩れてしまっています」デザイナーさんとしては「参考サイトの動きを共有したのだから大きくズレることはない」と信じていた。しかし、実際には“感覚的にわかっている動き”と“実装のための仕様”は、まったく別物なのです。（２）“参考サイトがあれば伝わる”という誤解参考サイトを提示すること自体は問題ではあ

クリエイティブ業界に長く住んでます。リキテックスにまみれて絵筆を持ちました。周りを汚しながらエアブラシ吹いてました。ロットリングの詰まりに悩みながら線引いてました。烏口研いでました。上がってきた写植。コピーが増えた、減った、変わった。カッター手に必死で字詰してました。版下。輸送中に文字剥がれ。校正で気が付き大慌て。楽になりました、ホント。デザイン、創意工夫。ココ、今も昔も変わってません。でも、そのうちAIが。。。（笑）

Webサイト制作やアプリ開発の現場でよく使われる言葉のひとつに「デザインカンプ」というものがあります。この記事では、「デザインカンプとは何か？」を初心者の方にもわかりやすく解説し、その重要性や作成のポイントについてご紹介します。デザインカンプとは？**デザインカンプ（Design Comp）**とは、「Design Comprehensive Layout（デザインの包括的なレイアウト）」の略称で、Webサイトやアプリの完成イメージを視覚的に表現した設計図のことです。一般的には、Photoshop、Figma、Adobe XDなどのデザインツールを使って作成されます。カンプは、実際のブラウザや画面でどのように表示されるかをクライアントや開発者に明確に伝えるためのもので、レイアウト・配色・フォント・ボタン・画像など、画面に表示されるあらゆる要素が含まれています。ワイヤーフレームとの違いよく混同されるのが「ワイヤーフレーム」です。ワイヤーフレームは構成や要素の配置をシンプルな線や枠で表した設計図であり、見た目のデザインは重視されていません。一方、デザインカンプは見た目も含めて最終的な完成イメージに近いものを表現します。つまり、「構造」を伝えるのがワイヤーフレーム、「完成イメージ」を伝えるのがデザインカンプです。なぜデザインカンプが必要なのか？クライアントとの認識のすり合わせ　ビジュアルで具体的なイメージを共有することで、完成物に対する誤解や食い違いを防ぎます。開発チームへの指示書　デザイナーが作成したカンプは、コーダーや開発者にとって「どのように実装すればいいか」を理解するための重