すべてのブログから「#コーディング」タグの検索結果

最近、朝走ることを三日坊主におわらないように頑張っているあきです！　さぁ皆さんマルチタスクって聞いたことはありますが、実際マルチタスクってあんまり良くないの？みたいなことを聞いたことがある方が多いと思いますが、今回はマルチタスクについて言及していきたいと思います。　マルチタスクとは・・？マルチタスクとは、複数の作業を同時並行、短期間で切り替えながら同時進行で行う能力のこと。　効率は？要領良くマルチタスクを実行できれば、複数の作業を効率良く進められます。しかし一般的に人間は、ひとつの物事に一点集中して取り掛かるほうが、仕事の効率は上がるとされているのです。実際、テレビを見ながら、スマホをいじる方は多いと思いますが、最近では実生活で何々しながら、スマホをいじる方が多いと思います！自分も音楽を聴きながら、コーディングするとかね！アニメ見ながらコーディングしたりしますが、やはり向いている作業と向いていない作業に分類できますよね！ここではマルチタスクに向いている作業と向いていない作業を区別すれば、効率よく作業できるのではないかという仮定を立てて考えていきたいと思います！まず物事の作業には二つに分類できます。あまり考えず、手を動かすだけの単純作業と頭で考えながらクリエイティブなものを設計・デザインしているときの思考作業の二つにですね。　この二つの作業をマルチタスク　OR　シングルタスクに分けると人生が豊かになりそうですよね！結果を先に言いますと単純作業　＝＝＝＞　マルチタスク思考作業　＝＝＝＞　シングルタスクに分けるべきだと思います！・単純作業　＝＝＝＞　マルチタスクについてですがこちらの

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

※「サービス出品の1ページ目を目指して」をシリーズとして毎日更新していきます。2023年6月2日（金）HTML/CSSコーディングサービスを出品して3日目。みなさん、こんにちは。web制作コーダー2年目ひーちゃんです。早速ですが、昨日までの成果を発表します！それでは、6/1（合計2日間）での成果　です。【実施内容】・PR広告設定・サムネイル及びサービス紹介画像の変更【成果】・表示回数：141（前日比：+130）・クリック回数：6（前日比：+6）・CVR：成約0で測定不能・クリック率：約4%CVRとクリック率の前日比較はデータが無いためできませんでした。明日以降はできると思われます。【反省】今回は新たに広告を設定しました。昨日の表示場所が「HTML/CSSコーディング」の4ページ目だったことを考えると表示回数が141回あるのは上々な結果と言えます。ただしクリック率が4%と低いです。この数値をそのままCVRにできれば一旦成功と言えますね。（クリック数が分母に来るため、そもそもの比較はおかしいかもしれませんが、上昇を狙います。）詳しい広告費の設定内容や実際の表示状況などは後日報告いたします。【改善策】実績獲得でSEO評価をあげるためにできること・サービス価格の変更・ブログからの流入を図る現在すぐに行えるのは上記2つ。「HTML/CSSコーディング」で調べると、プラチナランクで実績ありのコーダーが、5000円〜で出品しているケースが多く見つかりました。したがって、実績0の私が売るには低価格への変更が良いと考えたため、本日からは下層ページ単価を3,000円〜で出品いたします。２つ目のブロ

はじめまして。都内のWeb制作会社でコーダーをしております あゆみ と申します。この度、ココナラにてサービスを出品しましたが、「誰か分からない人に仕事を頼むのはなあ…」と不安に思われる方もいらっしゃるかと思い、少しでも人となり知ってもらえたらとブログを執筆しました。◇経歴新卒で都内のIT企業に就職。システムエンジニアとして4年間勤務し、大手保険会社や銀行の業務システム開発に携わっておりました。↓スキルアップのため転職！↓現在都内のWeb制作会社にてフロントエンドエンジニアとして勤務しています◇性格　・まじめ　・面倒くさがり勉強が好きだったわけではないですが新しいことを知るのが好きで、社会人になってからも３つほどITや統計学の資格を取り、常になにかしらを勉強していました（笑）システムエンジニアの頃は、テレビのCMにも流れるような保険商品のシステム開発などを担当しましたが、大人数で大規模プロジェクトを進める業界の構造があったため、実際のユーザーの声が届かない場所で仕事をしており、もっと直接お客様を喜ばせたりお手伝いできる仕事をしたいなと思っていました。（一番の憧れの仕事は、ディズニーのキャストさんです。笑）（でも、夢の国はお客さんとして行きたい…というわがまま）丁度スキルをもっと身に付けたくてプログラミングスクールに通いだしたのもあり、個人で仕事をすれば直接お客様の役に立てるかも！と思ったのがきっかけでココナラを始めました。ココナラ歴はまだ短く出来る事のほうが少ないですが、これからもいろんなことを勉強して、いろんなお仕事をして、得られた知識や経験をお客様のために還元できたらいいなと

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝あなたのデザインをカタチにします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝初めまして。フリーランスWeb制作者のフクヤマです。 現在、31歳。鹿児島県でフリーランスコーダーとして活動しています。 あなたのデザインをカタチにしてお客様に届けるためのパートナーとして活動しています。 迅速・丁寧なコーディングを心がけています。 もともとは医療職でサラリーマンをしていました。 副業として軽い気持ちで始めたWeb制作でしたが、独学や本業で困難なことが多く6ヶ月かけて案件を獲得し、納品しました。 その時のお客様からの「ありがとうございます。」の言葉が忘れられず、Webが大好きになりそのまま脱サラ。 サラリーマン時代は「会社の名前」や「大勢のスタッフの中のひとり」だった私が人生で初めて、自分が努力してお金を対価としていただきさらに私個人への「ありがとう。」という感謝の言葉が私の人生を大きく変えました。 Web制作が大好きです。 デザイナーの方が丁寧に細部まで仕上げたデザインを丁寧にカタチにするお手伝いをします。 あなたからの連絡をお待ちしております。

最近では、AIに指示を出すだけでHTMLやCSS、JavaScriptなどのコードを生成できるようになりました。「もうWebサイトはAIだけで作れるのでは？」そう感じる方もいるかもしれません。私自身、Webサイトのコーディングやデザイン、アニメーション制作などを行っていますが、AIを活用する機会は確実に増えています。では、AIがあればコーディングの知識は必要なくなるのでしょうか？AIはコードを書くのがかなり得意例えば、「画像と文章を横並びにしたい」「スクロールすると文字が表示されるようにしたい」「スマートフォンでは縦並びにしたい」こうした指示から、AIはかなり素早くコードを生成できます。以前なら一つずつ調べながら実装していた部分も、AIを活用することで制作時間を短縮できるようになりました。Web制作においてAIは、非常に便利な「制作アシスタント」になってきていると感じます。でも、そのままでは完成しないことも多い実際に制作していると、AIが生成したコードをそのまま使えるケースばかりではありません。PCでは綺麗なのにスマートフォンではレイアウトが崩れる。アニメーションは動くけれど、少し動きが不自然。既存のコードと組み合わせるとエラーが発生する。デザインは整っているけれど、どこか「普通」に見える。こうした部分は、人がコードを確認して調整する必要があります。特にWebサイトは、ほんの数pxの余白や文字サイズ、アニメーションの速度を変えるだけでも印象が大きく変わります。「コードを書く」から「コードを判断する」へこれから重要になるのは、すべてのコードをゼロから手入力する能力だけではないと思

はじめまして。これまでホームページ制作やWebサイトの運用・保守を中心に、多くのお客様のWeb制作に携わってきました。このたび、より多くの方のお力になれればと思い、本日よりココナラでのサービス提供を開始いたしました。企業サイトや店舗ホームページ、WordPressサイトの制作・修正、サイトの保守・運用など、幅広く対応しております。「ホームページを新しく作りたい」「今あるサイトをもっと見やすくしたい」「ちょっとした修正だけお願いしたい」そんなご相談も大歓迎です。ココナラでは初めての出品となりますが、これまで培ってきた経験を活かし、一つひとつのご依頼に丁寧かつ誠実に対応いたします。ご相談・お見積りは無料ですので、Webサイトに関するお悩みがございましたら、ぜひお気軽にご相談ください。これからどうぞよろしくお願いいたします！

本日は、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">  タイトル</

最近ではWordPressやホームページビルダーなどで、ウェブページを作るのに難易度が下がってきています。実は20年ほど前にウェブページ作成のレクチャーは受けたんですが、長年携わっていないと忘れてしまうもの。また、Flashがなくなるなど環境も変化しているので、昨年改めてウェブ作成にチャレンジすることにしました。いつもIllustratorやPhotoshopなどのアプリを使っているので、Adobeのウェブ制作アプリ「Dreamweaver」を活用することにしまして、Adobeのサイトには動画でウェブの作り方を学ぶことができるので、それを見ながらメモをする…。そのノートも100ページを超えたかな。Adobeの推奨するやり方は「HTML」や「CSS」などといったコードを編集するというもの。ワード・エクセルなどのように、直接文字や図形を入力して直感的に作るのとは違い、コードを打ち込んではブラウザで開いて確認する。トライ＆エラーの繰り返しでした…。というわけで、先日。お客様から簡単なウェブページのお仕事をいただきまして、自分の魂に火がついてしまいました。本格的に、自分のウェブページを作ってみようと。HTML・CSSの編集からスタートしたわけですが、「margin」と「padding」の違いを改めて整理したり、CSSで飾りつけた文字や色やマージンが正確に表示されていなかったのを修正したり…。やっぱり日常的にコーディングをしないと、なかなか覚えられないです。ノートにまとめても、その内容を思い出せなかったり…。というわけで、Dreamweaverとノートや教本と格闘しながら復習すること数日

私のサービス「Webサイトコーディング」が、Webサイト制作・Webデザイン ＞ HTML・CSSコーディングのカテゴリーランキングにて、１位を獲得いたしました。これまでご依頼いただいた方へ、本当にありがとうございます！今後ともよろしくお願いいたします。また、新規のご依頼もお待ちしております(^^)ホームページ・ランディングページを中心に、Webサイトのコーディングを承っております。「デザインは用意できているけど、その後のコーディングはどうすればいいんだろう…？」そんなお悩みを解消させていただきたいと思っております。コーディングからサーバーへのアップロードまで、一貫してお任せいただけます！その他、０からのサイト制作や既存サイトの修正・更新など、幅広く対応いたします。Webサイトについて不明なことがありましたら、電話相談のサービスもありますので、どうぞお気軽にお声掛けください☆今後ともよろしくお願いいたします。 早苗

Web制作をしていると、要素を一時的に非表示にしたい場面があります。そんなときによく登場するのが、display: none;visibility: hidden;opacity: 0;この3つ。どれを使っても画面上では要素が「見えなくなる」ので、「結局、何が違うの？」と思ったことはありませんか？実はこの3つ、見た目は似ていても要素の扱われ方はかなり違います。今回は、それぞれの特徴と使い分けについて整理してみます。① display: none;まずはWeb制作でもよく使う、.box {  display: none;}です。display: none;を指定すると、要素は表示されなくなり、レイアウト上のスペースもなくなります。例えば、<div class="box1">BOX 1</div><div class="box2">BOX 2</div><div class="box3">BOX 3</div>このBOX 2に、.box2 {  display: none;}を指定すると、BOX 1BOX 2BOX 3と並んでいたものが、BOX 1BOX 3となります。BOX 2が使っていたスペースもなくなり、BOX 3がその場所へ詰めて表示されます。つまり、「要素ごとレイアウトから消したい」という場合に向いています。② visibility: hidden;続いて、.box {  visibility: hidden;}です。こちらも画面上では要素が見えなくなります。ただしdisplay: none;との大き

WordPress化でNEWS一覧を作成しました！本日はWordPress化の作業を進めました。ニュース一覧を動的に表示するためのPHPコードを学習しながら、NEWSカードの作成を行いました。---#投稿情報を自動で取得今回作成したNEWSカードでは、（デザインを少し変えました）WordPressに投稿した記事の* アイキャッチ画像* 投稿日* カテゴリー* 記事タイトルを自動で取得して表示しています。例えば、```phpthe_post_thumbnail();```でアイキャッチ画像を表示し、```phpthe_title();```で記事タイトルを表示できます。---カテゴリーの取得に苦戦今回特に印象に残ったのはカテゴリー表示です。```php$categories = get_the_category();```でカテゴリー情報を取得し、```phpwp_list_pluck()```や```phpimplode()```を使って複数カテゴリーを表示しました。コードの意味を理解するのに少し時間がかかりましたが、「投稿情報を取得する → 必要な情報を取り出す → 表示する」という流れが少しずつ理解できてきました。--- HTMLとの違いHTMLだけの場合は、ニュースを追加するたびに手作業で更新する必要があります。しかしWordPressでは、投稿するだけで一覧ページに自動反映されます。実際にコードを書いてみることで、WordPressがどのように情報を管理しているのか学ぶことができました。学んだこと最初はPHPを見るだけで難しく感じていましたが、実際に* the_perm

こんにちは！最近とあるサイトで「人に頼るほど自分の能力も高まる」といった内容の記事を読みました。人には必ず得手不得手があり、それぞれが専門にしている仕事内容も様々ですよね。何かに取り組んでいるとき、全て自分でやろう！と頑張ってしまったり、人に頼りたいけどなかなか助けを求められなかったり・・・そんな経験がある方も多いのではないでしょうか。人に頼ることによって、その人から学ぶ人に頼ることは勇気がいることかもしれませんが、頼ってみることによって、その人から学べることがきっと出てくるそうです。自分が持っている答えや考え、相手が持っている答えや考えそれらは必ずしも一致せず、異なる考えを持っているからこそ、自分自身の領域を広げられることに繋がっていきます。確かに言われてみればそんな気がしますよね。人に手伝ってもらうことで、自分の作業に集中できるようになる自分が苦手な作業や出来ないことを、人に手伝ってもらうことで、本来自分がやりたかった作業に注力できるようになります。そうすることで得意なことを伸ばせるようになったり、新たに仕事の幅が広がったり・・「分業」という言葉がありますが、得意なことに特化し、苦手なことはその道のプロにお任せして役割分担を意識してみると、また違った形で物事が進むかも知れません。私の話になり恐縮ですが、私は営業活動があまり得意ではないので笑、今の時代ココナラがあって良かったなとしみじみ感じています。ココナラがあったことで、少ないながらも存在を知っていただき、素敵な方々と繋がることができました。そういった出会いに感謝していますし、自分自身が誰かの役に立つことができることがとて

Webサイトのコーディングは、デザインを再現するだけの作業だと思っている方もいるかも知れません。確かに、コーディングの第一歩として、デザインを再現する技術・知識は絶対に必要ですが、ただデザインを再現する以外にも様々な事を考慮してコーディングする必要があります。細かく上げたらきりがないですが、例えば、、、・デザインを再現する・主要ブラウザで表示崩れが起きないようにする・文法違反にならないよう仕様に準拠する・メンテナンス性を考慮したCSS設計を行う・インデントを揃える等、記述に一貫性を持たせる・適切な文書構造のマークアップを行う・パフォーマンスが落ちないようにする・JavaScriptやPHP等は脆弱性が無いコードを書く・アクセシビリティに配慮したコーディング辺りが有ります。それぞれ、具体的に見ていきましょう。デザインを再現する固定レイアウトではなくリキッドレイアウトのレスポンシブ対応が一般的な現在、ピクセルパーフェクトと呼ばれる1pxのズレも許さないようなコーディングは求められるケースもほぼ有りませんし、そもそも現実的では有りませんが、デザイン再現はコーディングにおける最も基本的な部分です。主要ブラウザで表示崩れが起きないようにするこれもデザイン再現と同じような部分ですが、Chromeでは崩れないのにFirefoxでは崩れてしまっては、最低限の品質も保てなくなってしまうので、主要ブラウザで崩れないようにするのも基本的な対応です。文法違反にならないよう仕様に準拠するValidationでエラーにならないようにするだけであれば全部divで組んでも良いのですが、例えば h2の中にdiv

CSSを書いたのに、「あれ？全然変わらない…」Web制作をしていると、こんなことがよくあります。コードは合っているように見えるのに反映されないと、どこを直せばいいのか分からなくなりますよね。今回は、CSSが効かないときに私が確認しているポイントを5つまとめてみます。① スペルミスがないか確認するまず確認したいのが、意外と多い単純な入力ミス。.title {  backgroud-color: green;}これではbackgroundの「n」が抜けているので反映されません。プロパティ名だけでなく、;を忘れていないか{ }が閉じているかクラス名が間違っていないかなども確認します。「絶対合ってる！」と思っているときほど、単純なミスだったりします② HTMLとCSSのクラス名は同じ？HTMLでは、<div class="staff-card">なのにCSSでは、.staff_card {  padding: 20px;}となっていれば、もちろんCSSは効きません。-と_の違い、大文字・小文字なども要チェックです。CSSだけを見るのではなく、HTML側のクラス名と見比べてみます。③ 他のCSSに負けていない？CSSには優先順位があります。例えば、.card {  color: green;}#staff .card {  color: black;}この場合、より詳細に指定されている#staff .cardの方が優先されます。「CSSは書いてあるのに色が変わらない！」というときは、別のCSSで上書きされていないか確認してみます。Chromeの検証ツールを見ると、どのCSSが

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

ブログをご覧いただき、ありがとうございます！私についてはじめまして。栃木県でコーダーをしている「おば（小原）」です。私は、現在LPサイトやコーポレートサイトのコーディングをメインに活動しています。経歴2022年11月よりオンラインスクール「デイトラ」のWEB制作コースを受講。 サイトの仕組みや作り方を学びました。 「HTML/CSSを用いた、静的なサイト。」 「PHP/WordPressを用いた、動的なサイト。」 2パターンの制作を経験しました。 また、CSS設計も勉強し、保守性の高いサイトをコーディングします。 その他WEB関連ではありませんが、2社の製造工場に累計約10年ほど勤務。 「ものづくりという点では、品質チェックやルールなど共通する点が多く、必ずお力になれます！」サイト制作するにあたってサイト制作をする上で、お客様とのやり取りを第一により良いサイトを作ることを考えています。なので、コミュニケーションを大切にひとつひとつ丁寧に対応させていただきます。ご相談だけでも構いませんので、お連絡お待ちしております！

こんにちは！Webコーダーの【くまこ】と申します。ブログをご覧いただき、ありがとうございます！８月になりましたね。毎日、蒸発しそうなほど暑いです…。子どもたちは夏休みですねぇ。いつもとは違った生活サイクルになっている方もおられるかもしれません。お盆休みにお出かけの計画を立てているという方もたくさんいらっしゃるのではないでしょうか。そんな中、「普段よりも仕事が進められていない」「旅行までにLPを仕上げたいけど時間が足りない」というお悩みはありませんか？・夏休み中のお子さんと過ごされているママデザイナーさん・お盆に予定があるフリーランスの方・クライアントがお盆休みの間に仕事を進めておきたい方そんな皆さんにこちらのサービスがオススメです！現在「コーディング代行」を出品しております。お盆も休まず対応できますので、お悩み解決のお手伝いができると思います。「進捗が不安なので、出先から状況を確認したい」というお客様に向けて、テスト環境へのアップロード対応も可能です。（ほんとは、お出かけ中にお仕事のことなんて考えたくないとは思うのですが・・・）＾＾；よろしければ、上記のリンクから当サービスをご覧ください。ご不明点などお気軽に連絡いただければ幸いです。最後までお読みいただきありがとうございます。皆さんが暑い夏を元気に楽しく過ごせますように！

初めまして！ブログをご覧いただきありがとうございます。フリーランスでWebサイト制作をしている橋本と申します。現在はホームページ、ランディングページのコーディングをメインに活動しております。サイト制作にあたってWeb制作のモットーは「変わるをつくる。喜びをつくる」です。お客様にとって満足のいくサイトをつくる。集客のできるサイトをつくる。そこでお客様の利益をつくる。Webサイト制作を通して、そんな沢山の”つくる”を生み出すことで、お客様によりよい変化を作る。全力でWebサイト制作をつくることで、最後にはお客様に喜びを感じてもらいたいと思っております。ご依頼を受けるにあたり、クオリティの高いサイトの制作はもちろんですが、「お客様とのコミュニケーション」を重視してまいります。まずはご相談だけでもよいので、ご連絡お待ちしております。よろしくお願いいたします。

多くの人が知っていると思いますが、「Local by Flywheel」を使っています。まずは、自分のパソコンでサイトを作成（コーディング)してから、サーバーにアップする流れが多いと思います。その自分のパソコンでサイトを作成する際に、HTMLとCSSだけのサイトだけですと、ファイルやエデッタだけあればそれなりにできるのですが、WordPressは色々面倒。その面倒な作業を簡単にしてくれるのが、「Local by Flywheel」です。もちろん無料です。海外のサイトからインストールなどで英語に抵抗があるとちょっとと思う方もいると思いますが、「Local by Flywheel」「使い方」で検索すれば、分かりやすい記事がたくさん見つかると思います。ちなみに、最近は今まで有料でしか使えなかった機能が無料で利用できるようになったとのこと。（この機能の使い方を調べるのは難しいかもですが、わからなくても全然便利に使えます）おすすめです。

# Webサイトにカルーセルを実装しました！想像以上に難しかった制作記録本日は、制作中のWebサイトに「カルーセル」を実装しました。カルーセルとは、複数の画像やカードを横方向へスライドさせて表示する仕組みのことです。店舗や施設などの写真をすべて一度に並べると、ページが長くなったり、情報量が多く見えたりします。カルーセルを使えば、限られたスペースの中で複数の写真を見せられるため、店舗紹介や制作実績などにも活用できます。今回は店舗内の写真を見やすく紹介するために取り入れましたが、完成するまでの調整が想像以上に難しかったです。## Swiperを使ってカルーセルを実装今回のカルーセルには「Swiper」というライブラリを使用しました。Swiperは、Webサイトにスライド機能を追加できるライブラリです。HTMLでスライドの構造を作り、CSSで見た目を整え、JavaScriptで動き方を設定します。大まかな仕組みは、次のようになっています。* カルーセル全体を囲む要素* スライドをまとめる要素* 1枚ずつのスライド* 現在位置を表すページネーション* カルーセルの動きを設定するJavaScriptただ写真を横に並べるだけではなく、Swiperで決められたクラスを正しく指定する必要があります。HTML・CSS・JavaScriptのどれか一つでも設定が合っていないと、横並びにならなかったり、スライドしなかったりするため、確認する部分が多くありました。## 写真の大きさをそろえるカルーセルに使用する写真は、それぞれ縦横の比率が異なります。そのまま表示すると、カードごとに高さが変わり、全体の

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

本日は、現在制作を進めているWebサイトの「店舗紹介」セクションをHTML・CSSでコーディングしました。今回は、デザインカンプをもとに、レイアウトや装飾を細かく再現することを意識して制作を進めました。実務を想定したコーディングを行いながら、HTMLの構造やCSSのレイアウト、画像の配置方法など、多くのことを学ぶことができました。今回制作した内容今回作成したのは、店舗の魅力が伝わる「店舗紹介」セクションです。✔ HTMLで構造を設計まずはHTMLでレイアウトを組みました。セクションタイトル左側の店舗内観写真右側の店舗外観・相談スペース吹き出し特徴カードデザインだけを見るとシンプルに見えますが、実際は見やすく保守しやすいHTML構造を考えながら作成しています。✔ CSSでデザインを再現CSSではデザインカンプに合わせて細かく調整しました。例えば…CSS Gridを使ったレイアウトFlexboxでアイコンと文字を横並びborder-radiusで写真の角丸position:absoluteで吹き出しを配置object-fitで画像サイズを調整transitionを使った画像アニメーション見た目だけでは分からない細かな調整もたくさん行いました。✔ 吹き出しを画像として重ねる今回のデザインでは吹き出しの形が特殊だったため、HTMLでは画像を配置し、CSSのposition: absolute;を利用して写真の上に重ねています。吹き出しの位置も何度も微調整しながら、デザインカンプに近づけました。✔ カードデザインも調整店舗の特徴を伝えるカードも制作しました。アイコンサイズ文字位置行間背景

📚 本日の学習今日はCSSで背景画像の実装について学習しました。単純に画像を表示するだけではなく、`background-image`を使用することで、テキストやボタンを重ねたヒーローセクションなど、実務でもよく使われるレイアウトを実装。特に意識したのは、・`background-size: cover;`で画面サイズに応じた表示にすること・`background-position: center;`で被写体が崩れにくい配置にすること・コンテンツの視認性を考えたレイアウト設計「表示できる」だけでなく、「どんな画面幅でも自然に見えるか」を意識しながらコーディングしました。少しずつですが、デザインを忠実に再現するためのCSSの考え方が身についてきたと感じています。明日も一歩ずつ積み上げます💻#Web制作 #HTML #CSS #WordPress #コーディング #Webデザイン #今日の積み上げ

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

高品質なコードを書くことは、プロジェクトの成功やメンテナンスの容易さに直結します。今回は私が心がけているポイントについて紹介します。1. コーディングスタイルを統一するプロジェクトで統一されたコーディングスタイルガイドラインを作成し、それに従いコーディングする。インデントの使い方、変数名の命名規則、コメントの書き方など、スタイルを統一することでコードの読みやすさが大幅に向上します。統一されたスタイルは、他の開発者がコードを理解しやすくなり、バグの発見や修正も容易になります。2. わかりやすい命名変数名や関数名は、その役割を明確に示すように命名します。例えば、calculateTotalやfetchUserDataのように、具体的な動作を示す名前をつけると、コードを読むだけで何をするのかがわかります。命名のルールを決めておくことで、コード全体の一貫性が保たれます。3. 単一責任の原則を守る関数やクラスは、それぞれ一つの責任を持つように設計します。これを「単一責任の原則（Single Responsibility Principle）」と言います。複数の責任を持たせると、コードが複雑になり、バグが発生しやすくなります。単一の責任に絞ることで、変更に強いコードになります。4. 再利用可能なコードを書く同じ機能を複数回書くのではなく、再利用可能なコードを作成します。モジュール化や関数の分割、パラメータ化を意識すると良いです。これにより、コードの重複を避け、変更が必要な場合にも一箇所を修正するだけで済むため、メンテナンスが容易になります。5. テストを書く習慣をつけるテストはコードの品質

こんにちは、Hiro Designです。めっちゃ久しぶりの投稿になります。これまで練習で色々なデザインのホームページを制作してきましたが今回初めて料理店のデザインを制作しました。もし、興味がある人はご覧ください。「京料理」のホームページになります。＊アクセスマップの画像が消えていますがGoogleマップが表示されています。以上が今回制作した京料理店のホームページになります。最後までご覧いただきありがとうございます。また、こちらからご依頼も受け付けています。

はじめまして！ フリーランスWebデザイナーのAmotDesignと申します。 神奈川県相模原市でWebサイト制作をしています。Web制作のお仕事を続けて18年以上。お客様に恵まれ、いろんな業種のホームページ制作をご依頼いただいております。 そして2023年10月、ココナラデビューしました！遅ればせながらココナラを始めたわけですが、その目的は『ホームページ制作の依頼をいただくこと』ではありません。ココナラでの目的・やりたいことは、 『Webデザイナーを目指している初心者の方 『Webデザイナーだけど、いま業務で困っている方』 このような方々のサポートをすることです！もともとはスーパーの店員だった私。未経験から制作会社に転職しましたが…。１人でWeb制作の勉強をしているときは、常に自信がなく悩んでいました。デザイン学校や有名なWebスクールに通わず、まったくの自己流・独学。進む方向がわからず、何が正解かもわからず…。 おそらく当時の私と同じ気持ちで、未来の不安と戦っているWebデザイナー志望者さんは大勢いるのではないでしょうか。 同じ道を通ってきたからこそ、そして、Web制作を本業にして経験を積んできた私だからこそ、できる何かがあるのではと、ムズムズ・ウズウズする気持ちをココナラにぶつけてみようと思ったのです。 では、なぜそれをココナラでやるのか。 「自分のホームページでサービス展開すればいいのでは？」 「オンラインサロンかオンラインスクールでもやればいいのに。」 そうですよね、そうしたいところなのですが…。 本業のホームページは、あくまで『ホームページを作ってほしい』方をターゲ

ココナラでのプラチナランク獲得、達成しました！(＾◡＾)✨素晴らしいクライアントの皆様のお陰です！素晴らしいクライアント様のコメントはこちらです。https://coconala.com/users/3314927/reviewsただ、プラチナランクへの旅路はスムーズではありませんでした。評価「1」の深い谷に落ち、「Web制作の基本も知らない方」という刺さるコメントの、公開処刑を受けたことも。(恥ずかしい)　その瞬間、私は「プラチナ・ピーナッツ」とかし、まるで底なし沼へと転がり落ちて行くようでした(コロコロ)だけど、その微小な豆粒は、地獄でケンシロウと共闘し(意味不)、もがきながら地上に復活。南斗無限修正を回避し、そして今、プラチナの輝きを湛え!(読めん)、相変わらず暇を持て余しております（笑）、、、、、、、、、(;_;)Web制作でお困りの方、ぜひともプラチナ・ピーナッツにお任せください！WordPressの組み込みもお手頃価格で承ります！(＾-＾)ノご検討、心よりお待ちしております！

はじめましてピックノートと申します。 数あるブログの中からご観覧いただきありがとうございます(*^^*) ここで簡単に自己紹介を。 Webデザインの仕事をはじめるまでは、旦那さんの度重なる転勤先で就職が難しく、パートや短期の派遣を繰り返していました。しかし、転勤先で異なる業種、スタイルで勤務する事は思った以上に大変でした。そこで、転勤先で同じ仕事を続けていきたいと思い、学生時代に専攻したプログラミングを活かして何かできないか考えWebデザインに行きつきました。技術習得のためイチから学び直し現在に至っています。人との繋がりを大切に、お客様に喜んでいただけるよう、これからも精進していきますのでどうぞよろしくお願いいたします！ ◎わたしの出品サービス◎WＥBページデザイン参考https://coconala.com/users/2970836/portfolioshttps://coconala.com/users/2970836/portfolios◎おわりにお気軽にご相談ください。最後までお読みいただきありがとうございます！

先日、初のコーディング依頼を受け、無事に納品完了いたしました。なかなかのボリュームで時間がかかってしまいましたが、提示した納期よりも前倒しで納品させていただきました。まだまだ駆け出しですが、今後ともよろしくお願いいたします。

WebサイトをPCで作って、「よし、いい感じ！」と思ってスマホで確認してみたら……「あれ？なんか見づらい…」なんてことがあります。レスポンシブデザインでは、単純にPC版を小さくするのではなく、画面の大きさに合わせて見やすいレイアウトに変えることが大切です。今回は、スマホ表示で特に見直したいポイントをまとめます。① 3列・4列をそのまま表示しないPCでは横に3枚並んだカードも、スマホではかなり窮屈になります。例えば、PC → 3列タブレット → 2列スマホ → 1列というように、画面幅に合わせて変更すると見やすくなります。FlexboxやGridなどを使って、画面幅に合わせてレイアウトを変える方法は、コンテンツを見やすく保つためにも有効です。② 文字サイズもスマホで確認PCではちょうどよかった大きな見出しも、スマホでは何行にも折り返されることがあります。逆に小さくしすぎると読みにくくなってしまいます。**「画面に収まるか」だけではなく、「実際に読みやすいか」**をスマホで確認することが大切です。③ 余白をそのまま使わないPCで左右に80pxの余白を設定していても、スマホで同じ余白を使うと、コンテンツ部分がとても狭くなってしまいます。スマホでは、padding: 0 20px;など、画面に合わせて余白を調整します。④ 画像は画面からはみ出していない？画像に固定幅を指定していると、スマホで横にはみ出すことがあります。そんなときによく使うのが、img {  max-width: 100%;  height: auto;}画像だけでなく、文字やコンテンツが横にはみ出して横スクロールが発生

Webサイトを作っていると、ボタンやカード、画像などでよく使うのがborder-radiusです。角を少し丸くするだけでも、デザイン全体の印象はかなり変わります。今回は、角丸の大きさによってどんな印象になるのかをまとめます。border-radiusとは？border-radiusは、要素の角を丸くするCSSです。例えば、.card {  border-radius: 12px;}とすると、カードの四隅が少し丸くなります。数値を大きくするほど、丸みも強くなります。角丸が小さい場合例えば、border-radius: 4px;のように小さめにすると、きちんとした印象シャープな印象落ち着いた印象ビジネス向けになりやすいです。企業サイトや、少しかっちりしたデザインにも合わせやすいです。8px〜16pxくらいは使いやすいWeb制作では、border-radius: 8px;border-radius: 12px;border-radius: 16px;くらいは、とても使いやすいサイズです。このくらいなら、柔らかさは出るけれど、丸すぎないというバランスになります。カードや画像、入力フォームなどにも使いやすいです。角丸を大きくすると柔らかい印象に例えば、border-radius: 24px;border-radius: 30px;など、大きめにすると、親しみやすいかわいい柔らかいカジュアルな印象になります。美容系、カフェ、子ども向け、女性向けなどのデザインとも相性が良いです。50%にすると円になる正方形の要素に、border-radius: 50%;を指定すると、丸い形になります。プロフ

WordPressでホームページを制作していると、「ファイルを更新したのに、なぜか表示が変わらない！」ということがあります。今回は実際のサイト制作でこの現象が起こり、ブラウザのキャッシュとURLのバージョンについて学んだのでまとめてみます。更新したのに古いページが表示されるのはなぜ？Webサイトを一度表示すると、ブラウザは画像やCSSなどのデータを一時的に保存することがあります。これが**キャッシュ（cache）**です。キャッシュがあることで、同じサイトをもう一度開いたときにすべてのデータを毎回取得する必要がなくなり、ページを速く表示できます。とても便利な仕組みなのですが、Webサイトを制作・更新していると、サーバー上は新しくなっているのに、ブラウザには以前の表示が残っているということがあります。今回もPCでは新しいページが表示されているのに、スマートフォンでは以前のページが表示されるという現象がありました。URLの最後に「?v=20260809」を付けてみる今回試したのが、URLの最後に?v=20260809を付ける方法です。例えば、example.com/というURLを、example.com/?v=20260809のようにします。すると、ブラウザなどからは異なるURLとして扱われる場合があるため、以前のページURLに対するキャッシュを避けて表示を確認できることがあります。このようにURLを変化させてキャッシュの影響を避ける方法は、一般に**キャッシュバスティング（Cache Busting）**と呼ばれます。「20260809」という数字に意味はある？最初は、「2026

今日は、WordPressでお問い合わせフォームを作成する際によく使われる Contact Form 7 の設定確認と、フォームのデザイン調整を行いました。Contact Form 7のメール送信テストフォームを作成したら、まず大切なのが正常にメールが送信されるかの確認です。実際にフォームから送信を行い、お問い合わせ送信後に「ありがとうございました。メッセージは送信されました。」と表示されるか管理者宛にメールが届くか入力内容が正しく送信されているかを一つずつ確認しました。今回は最初メールが届かず焦りましたが、原因は迷惑メールフォルダに振り分けられていただけでした。フォームが正常に動作していても、送信先のメールサービスによっては迷惑メール扱いになることがあるため、受信できない場合は迷惑メールフォルダも確認することが大切だと学びました。Contact Form 7のCSS調整次に、お問い合わせフォームをスマートフォンでも使いやすくするため、CSSの調整を行いました。今回調整したポイントはこちらです。入力欄の高さを統一横幅を100%に設定し画面いっぱいに表示スマホでも文字が小さくならないようフォントサイズを調整日付入力欄（date）の高さを他の入力欄と揃えるボックスサイズを統一してレイアウト崩れを防止例えば日付入力欄には次のようなCSSを設定しました。.wpcf7 input[type="date"] {  width: 100%;  height: 56px;  min-height: 56px;  padding: 10px 16px;  font-size: 16px;  li

最近、Figmaで作られたデザインをもとにコーディングする機会が増えてきました。最初の頃は、Figmaに書かれている数値をそのまま見て、「この余白は何px」「この文字サイズは何px」「この色は何番」という感じで、見た目をそのまま再現することばかり意識していました。もちろん、それも大事です。ただ、実際にコーディングしていく中で感じたのは、Figmaをただの設計図として見るだけでは不十分だということです。Figmaからコーディングするときに大事なのは、見た目を写すことではなく、デザインの意図を読み取って、Web上で崩れにくい形に落とし込むことだと思っています。数値をそのまま信じすぎないFigmaを見ると、余白やサイズがすべて数値で表示されます。たとえば、上の余白が64px、カード同士の間隔が24px、文字サイズが18pxというように、細かく確認できます。ただ、コーディングするときにその数値を全部そのまま使えばいいかというと、そうではないと思っています。なぜなら、Figma上ではきれいに見えていても、実際のWebサイトでは画面幅が変わったり、文章量が変わったり、画像サイズが変わったりするからです。特にスマホ表示では、Figma上の余白をそのまま使うと広すぎたり、逆に詰まりすぎたりすることがあります。なので、Figmaの数値はあくまで基準として見ています。完全に同じpxにすることよりも、実際の画面で見たときに自然かどうかを重視しています。余白のルールを見るFigmaからコーディングするときに、特に意識しているのが余白です。デザイン全体を見たときに、「セクションごとの上下余白はどれくらい

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

みなさん、こんにちは。nikoniko 21です。今回は私がプログラミングの副業ができるようになるまでについてを書きたいと思います。私は昔から機械とか、ロボットとかの理系っぽいことに興味がありました。そして本格的に教室や通信教育でそういったことを勉強できませんでしたが、パソコンや携帯等の使い方を独自に勉強してどんどん詳しくなっていって自身の才能を多少ですが開花していきました。昔は機械とかに興味こそありましたがどうすれば勉強できるのかはちゃんとわからなくて、普段の生活で機械に詳しくなったんだと思います。その後は機械に興味はあってもそういった仕事に就くのは難しいと思って別な道を進みました。そしてプログラミングに興味を持ち始めてプログラミングの副業を始めてみたいと思い始めて勉強をして、今ではWebページのコーディングやWebページ制作やレスポンシブ対応等ができるようになりました。普段の周囲の機械の使い方を独自に勉強して機械に詳しくなって、自分の強みを自覚していって今に至る...。昔はそんなこと夢にも思ってませんでした。なので、今はそういった状況になってびっくりしています。本日のブログはここまでです。最後まで読んでくださってありがとうございました。

みなさん、こんにちは。nikoniko 21です。今回は、ココナラの集客についてを書いていきたいと思います。私は最近、本格的にココナラの集客に力を注ぎたいと思っています。主にXで宣伝していて、朝やお昼に宣伝のつぶやきやコーディング等に関するつぶやきを行ってます。また、他の人のつぶやきに返信をしたり、他の人のつぶやきをリポストしたりしていろんな人に私のことを知ってもらおうとしています。結果、見てもらえてますが閲覧数が毎日同じであまり多くの人に見てもらえてない状況...。悩んでます💦。Xはいろんな人に見てもらえると思ってたのですが💦。もっと他でも宣伝したほうがよいのでしょうか？。なんとかもっといろんな人に私のことを知ってもらいたいです。他にも方法を探さねば！。本日のブログはここまでです。最後まで読んでくださってありがとうございました。

みなさん、こんにちは。nikoniko 21です。今回はココナラでのお仕事の感想を書きたいと思います。私はココナラのHTML・CSSコーディングのお仕事をこれまで2回行いました。その中で、私はお客様と綿密なコミュニケーションをトークルームでとっていてお客様とのやりとりを楽しく感じました。また、作業をしていてお客様のご要望通りにコーディングができたとわかったときはとても嬉しく感じました。ココナラでのお仕事はまだ回数が少ないですが、うまくいくとこんなにも楽しいものなんだなって思いました。前も書いたことですが、これからも勉強と集客を頑張ってよいお仕事に繋げたいと思います。本日はここまでです。最後まで読んでくださってありがとうございます。

効率的なコーディングは、プロジェクトの成功に直結する重要な要素です。ここでは、私がコーディングを効率化するために意識していることをいくつか紹介します。1. 計画と設計を大切にする効率的なコーディングの第一歩は、プロジェクトの計画と設計です。コードを書き始める前に、以下の点を確認します。要件の明確化：プロジェクトの目的や機能要件を明確にする。設計図の作成：ワイヤーフレームやフローチャートを使って、全体の構造を視覚化する。タスクの分割：大きなプロジェクトを小さなタスクに分けて、段階的に進める。2. コーディング規約の遵守コーディング規約を守ることは、コードの可読性と保守性を高めるために重要です。以下の点に注意します。一貫性：インデントや命名規則、コメントの書き方を統一する。ドキュメント化：コードにコメントを追加し、関数やクラスの役割を説明する。リファクタリング：定期的にコードを見直し、改善点を洗い出して修正する。3. 効率的なツールの活用適切なツールを使うことで、コーディングの効率を大幅に向上させることができます。以下のツールを活用しています。統合開発環境（IDE）：VSCodeやWebStormなどの高機能なIDEを使用する。バージョン管理システム：Gitを使ってコードのバージョン管理を行う。自動化ツール：テストやデプロイを自動化するためのツールを導入する。4. デバッグとテストの習慣化デバッグとテストは、コードの品質を保つために欠かせないプロセスです。ユニットテスト：関数やクラスごとにテストを作成し、正確に動作することを確認する。デバッグツール：ブラウザの開発者ツールやデバッグ

ご覧いただきありがとうございます。都内のWebメディア運営会社にてエンジニアとして勤務しているりゅうたと申します。プライベートでコーディングのスキルを高めたいと思い、コーディング教材を購入して静的なサイトのコーディングをデザインデータから実装しました。今回は制作に関しての概要をご説明できたらと思ってます。制作時間 : 2日(目安)制作費用 : 50,000円~70,000円(実務を想定した場合)ページ数 : 3ページ(トップ / お問い合わせページ / サンクスページ)フレームワーク: Astro使用言語 : HTML / CSS(Scss) / JavaScript (VanilaJS)※コーディングのみの制作です。※デザインデータは専門のデザイン教材から購入したものです。すべてのデザイン要素はライセンス条項に従って使用しています。今後も自分がコーディングした作品を掲載していけたらと思っております。よろしくお願いいたします。もしよろしければ下記のサービスを出品しているのでお気軽にご相談やご依頼など承っております。

皆さん、こんにちは。現役デザイナー/フロントエンジニアの【LIVVX】と申します。私はWeb制作会社にて、デザイナー/フロントエンジニアのポジションでお仕事をしています。お客様のビジネスやプロジェクトが目指す未来を力強く後押しするために、「強力なブランド構築と実績のデザイン」をモットーに日々制作に取り組んでいます。私の目標は、お客様に満足していただける作品を丁寧に制作し、その成果がお客様の目標達成に繋がることです。制作において特に得意としている領域は以下の通りですブランド構築の為のHP制作  お客様のブランドを力強く表現し、オンラインでの存在感を向上させるためのHPを制作いたします。デザインだけでなく、ユーザビリティやSEOにも注意を払い、効果的なウェブプレゼンスを実現します。成功を収めた新製品のLP制作 (実績のデザイン)  過去の成功を具現化し、新製品やサービスの魅力を最大限に引き立てるLP（ランディングページ）を制作いたします。実績に裏打ちされたデザインで、お客様の成果に繋がるよう心がけています。お客様と共に歩むプロセスで、お客様のご要望やビジョンを丁寧に汲み取りながら、成果につながるWeb制作をご提案いたします。何かご質問やご相談がありましたら、お気軽にお知らせください。一緒に素晴らしいプロジェクトを築いていけることを楽しみにしています。

私は日ごろはライター兼カメラマンとして活動しています。元は全国紙の記者・カメラマンでした。ほかの多くのWeb製作者とは違い、必要とあればコンテンツ（文章、写真など）までかかわることができます。著作権に対する意識も、「昨日今日、『仕事としてうまみがありそうだ』とWeb制作に飛び込んできた人とは大違い」と自負しています。この記事では、私がコーダーとしてどのようにWeb制作にかかわろうとしているかをご説明します。1.Photoshop やIllustratorで作ったカンプのクセや限界を理解しているまずは、この画像の左側のフォームをご覧ください。Photoshopで作られたカンプ（一部）をご覧ください。名前欄が上の名と下の名、電話番号欄が市外局番などを分けてある点などを除けば、ごくありがちなタイプです。しかし、よく見ると「名前」欄と「住所」欄、「メールアドレス」欄で高さが微妙に違っています。「メールアドレス」と「メールアドレス（確認）」の文字部分も「メールアドレス」のほうが出だしで少し右にずれています。「住所」「お電話番号」などの文字の上下の空き方にもバラツキがあります。これは本来は写真補正ソフトであるPhotoshopで作成したの主な原因でしょう。Illustratorでも同じことが起こります。また、Web制作のために開発されたFigmaやAdobe XDでも起こりうることです。私がコーディングした右半分をご覧ください。それを除くと、微妙な差とはいえ、スッキリしているはずです。（枠のラインがあったりなかったりするのは、キャプチャー画面を縮小したためです）Photoshopなどのソフ

初めまして、Webコーダーの【くまこ】と申します。ブログをご覧いただき、光栄です。最近は色んな場面で自分のWebサイトを持つ方が増えていますね。・飲食店運営をされている方・イベントを宣伝したい実行委員の方・個人でネット通販を始めたい方・サークル活動の紹介をしたい学生さんWebサイト制作の依頼もあちこちで飛び交っているのではないでしょうか。Webデザイナーさんや制作会社さんもきっと大忙しですよね。そんな方々のお力になるべく、「コーディング代行」の出品を始めました！需要の増える中、コーディング部分のお手伝いができればと思っています。ご興味を持たれましたら、よろしければ以下のリンクから当サービスをご覧ください。最後までお読みいただきありがとうございました！このブログに足を運んでくださったあなたとご縁がありますように…☆

皆さま、初めまして。 Webコーダーとして新たに活動を始めることになりましたYUKIと申します。 趣味は海外一人旅です！ カバー写真はオーストラリアのブルームという所です。 マイナーな所ですが、手つかずの自然が残っていておすすめスポットです。 私ですが先月まで福岡の制作会社でWebコーダーとして約1年半働いており、Webサイトの新規作成・更新案件等を担当していました。 この度、ココナラでサービスを出品し新たに活動させていただきます。サービス内容としては主にHTML/CSSでのコーディングです。 「自分のサイトが欲しいが、やり方が分からない…」 「予算が少ないが会社、のコーポレートサイトが必要になった。」「レイアウトや画像だけちょっと変更したい。」 このようにどんな相談でも些細なことでも誠意をもって承ります。 お気軽にご相談ください、皆さまとの出逢いを心よりお待ちしています！ YUKI

こんにちは。LP専門コーダー　Ui-Partner・おりです。今回は、WebサイトにSNSを埋め込みする方法について書いていきます。まずはTwitter編から。▼Twitterを埋め込んだ時の見た目こちらは、以前紹介したブログサイトです。わかりにくいですが、ページ右下にTwitterを埋め込んでいます。Twitterは埋め込むことで、そのアカウントのツイートがタイムライン形式で表示されます。▼Twitterの埋め込み方publish.twitter.comを検索していただくと、Twitterの埋め込みタグを生成してくれます。①埋め込むTwitterアカウントを入力する②埋め込み形式を選ぶ「タイムライン形式」と「ボタン形式」を選ぶことができます。③コードが生成されるので、Webページの配置したい位置に差し込むいかがでしょうか。思ったより簡単です！慣れれば、表示されるタイムラインのフォントや行間・表示領域の大きさなどもカスタマイズできます。自分のWebサイトにTwitterを埋め込んでみたい・埋め込んでいるものをカスタマイズしたいなどのご要望がありましたら、お気軽にDMでご相談ください。

ココナラでの皆様のお仕事をはじめ、お得意先さまの案件も頂戴いたしておりますが、その合間にウェブ制作の練習をしております。一からHTMLやCSSのコードを作り上げていくので、まずは数多くの練習をして慣れていくしかないかなと思っています。というわけで、ネットでウェブ制作の様々なTIPSを見て実践しているのですが、「luxy.js」というスクリプトがあるのを発見しました。ウェブに載せる写真など、特定の要素のスクロール速度や方向を、速くしたり斜めに移動させたりできるというもの。使い方の掲載されているサイトを参考に、作ってみました。…というページですが、実際にスクロールさせたものをキャプチャーしましたので、ご紹介いたします。▲パソコンでのスクロール▲スマホでのスクロール（１）メイン画像の、人々が上方向に移動する速度よりも奥のバルーンを遅くスクロールするようにし、手前のバルーンは早めにスクロールさせる。（２）そして、赤い服の女の子と紙吹雪のスクロール速度を変えることで、紙吹雪が浮き上がったように見える。（３）犬の風船と子供たちの写真もスクロールを早めて、立体的に見える。そんな効果を出してみました。なかなか面白い効果が出たのでは…と自画自賛しております。ウェブ制作も、突き詰めれば新たな発見ばかり。一般のデザインものと違い、プログラム知識が必要ですが、バグってもあらゆる原因を探して修正する。バグが直ったときの達成感は半端ではないです。※皆様、日頃は私へのご発注、大変ありがとうございます。これからも、様々なスキルを上げて努力いたします。よろしくお願い申し上げます。

こんにちは、テラシマケイコです。フリーランスでWEBデザイナーをしています！ココナラではコーディングのご依頼が主に頂いております！今回連続してコーディングのご依頼をしてくださった方がいらっしゃいました。その方から「想像していたより何倍も素晴らしい」「やり取りがマメでとても信頼できる」「ここまで良心的で完成度の高い仕事をしてくださる方に出会えてよかった」との評価をいただきました。ココナラではメッセージだけでやり取りをするので、どうしても自分のニュアンスが伝わっているだろうか？文章が冷たく感じないだろうか？お客様のニーズを自分は正しく認識できているか？と不安になることもあります。わたしのしつこい（かもしれない）ヒアリングに「いやいやそれくらい汲み取ってよ・・・」って思うお客様もいるかもしれません。でも納品してから「イメージと違う」を一番恐れているわたしはこれからも丁寧なヒアリングをさせていただきます。他の方に相談して納期・予算が合わなかった方、できる限りご希望にそえるように頑張ります。是非一度わたしにメッセージください！！！

たまたまadobeのセミナー動画の中で知ったココナラ。「打ち合わせにも出られないお家時間の活用になるんじゃない」って事で登録。業者対業者っていうより業者対個人っていうのが多いのかな。活用の仕方もだけど、制作費、トンマナ、馴染むまで試行錯誤しそう。活躍している他の人から学ぶかな～（笑）

おはようございます。今日からココナラでのスキル販売を開始します。「ライティングスキルとコーディングスキルで、みなさまのお役に立ちたい」そんな気持ちで、このブログを書き始めました。❏❑❑　ライティング　❏❏❏なにか書いてかたちにする。これは、私の人生の半分、30年近くに渡っていつもそばにあったスキルです。学生時代から小説を書くのが好きで、将来は直木賞がとりたくて、そんな気持ちでいました。卒業してからの就職先は新聞社。英語も大好きだったので、英字新聞社。記事を書くこともしたのですが、和書の出版を中心に活動しました。新聞社を離れてからも、校正や編集、翻訳を中心に、いつも文字とともにいました。時代はインターネットになって、webライティングという分野ができました。それ以前のライティングとwebライティングは、その目的やスタイルが違うものの、「文章を作る」という基本的な技術は同じです。現在私もwebライティングに軸足を移していますが、より読者との距離が近づいているように思います。❏❑❑　コーディング　❏❏❏紙の書籍の出版は、原稿を書く以外にも表紙のデザインや、ページのレイアウトなどさまざまな仕事が一冊の本に集まって作品となります。それと同じように、インターネットで文章を書く場合、webライティングだけでは完結しないさまざまな要素があります。webデザインと呼ばれる仕事を中心に、原稿とともに相乗効果をもたらすものです。私にはデザインの経験はありません。しかし、デザインをweb上に再現するコーディングの技術とライティングの技術を掛け合わせることができます。❏❑❑　あなたのお店や会社をネット上

ご覧いただきありがとうございます。LP制作を行っている「けん」です。LPを制作するとき、「まずはデザインだけ作ってもらえばいいの？」「コーディングは別の人にお願いする必要がある？」と疑問に思う方もいらっしゃるかと思います。今回は、LPのデザインから実装までまとめて依頼するメリットについてご紹介します。■ LPはデザインを作っただけでは公開できませんLP制作では、・ページの構成を考える・デザインを作る・HTML/CSS/JavaScriptで実装する・PCやスマートフォンで表示を調整する・サーバーへアップロードして公開するといった工程があります。デザイン画像が完成しても、それだけではWebページとして公開することはできません。そのため、デザイナーにデザインを依頼した後に、別のコーダーやエンジニアへ実装を依頼するケースもあります。■ デザインと実装をまとめて依頼するメリットデザインから実装まで同じ制作者が担当すると、やり取りをまとめやすくなります。たとえば、「スマホではこの部分を見やすくしたい」「ボタンに動きを付けたい」「このデザインは実装しやすい形に調整したい」といった内容も、デザインと実装の両方を考えながら制作できます。また、デザイナーとコーダーそれぞれに説明する必要がないという点も大きなメリットです。特に初めてLPを制作する場合は、窓口が一つになることで進行も分かりやすくなります。■ スマートフォンでの見え方も重要です現在はスマートフォンからWebページを見る方も多いため、LP制作ではスマホ表示も重要です。PCではきれいに見えていても、・文字が小さい・画像が大きすぎる・ボタン

「デザインは1ページだけなのに、なぜ見積り金額に幅があるのだろう」FigmaやXDで作成したデザインのコーディングを依頼するとき、このように感じる方もいらっしゃるかもしれません。コーディングの作業量は、単純なページ数だけでは決まりません。同じ1ページでも、ページの長さ、スマートフォン用デザインの有無、アニメーションやフォーム、納品方法などによって必要な作業が変わります。今回は、デザインデータからコーディングを依頼するときに、見積り金額へ影響しやすい5つのポイントを整理します。1．ページ数とページの長さ最初に確認するのは、ページ数と各ページのボリュームです。例えば、同じ「1ページのLP」でも、5セクション程度の短いページと、商品説明・実績・料金・FAQなどが続く長いページでは、実装するパーツの数が異なります。複数ページのサイトでは、ページ数だけでなく、異なるレイアウトが何種類あるかも作業量に影響します。・トップページ：1ページ・共通レイアウトの下層ページ：3ページ・個別デザインの下層ページ：2ページ・お問い合わせページ：1ページこのように整理すると、共通部分と個別に実装する部分を確認しやすくなります。見積りを依頼するときは、FigmaやXDの共有URLだけでなく、「全部で何画面あるか」「同じレイアウトを使うページがあるか」も伝えるとスムーズです。2．パソコン・スマートフォン用デザインの有無パソコン用とスマートフォン用のデザインが揃っている場合は、それぞれの見た目を基準にレスポンシブ対応を進められます。一方、スマートフォン用デザインがない場合は、画面幅が狭くなったときの並び順、余白

・AIに投げればデザイン通りのホームページが一瞬でできる・コーディング時間が1週間から30分になった！最近Xなどでよく目にする機会が増えましたね。Cursor、Claude Code、GitHub Copilot……AIがコードを書いてくれるツールの名前がニュースやSNSで飛び交うようになり「コーディングはAIに投げれば一発で終わる作業」というイメージが一気に広まりました。正直その気持ちはよくわかります。AIが文章を書き、画像を作り、動画まで編集できる時代です。デザインデータを渡すだけで、見た目そっくりのホームページが自動でできあがると思っても不思議ではありません。ただ実際にコーディングを10年やってきた立場からお伝えすると、「思っているほど簡単じゃないぞ」というのが正直な感想です。今回はその感覚を言葉だけで伝えるのではなく、実際にAIコーディングツールにデザインカンプを渡して「デザイン完全再現」を試してみました。その結果となぜそうなるのかを専門用語をできるだけ使わずに解説していきますね。なぜ「AI＝簡単」というイメージが広まったのかここ1〜2年で、AIにコードを書かせる仕組みは急速に進化しました。中でも話題になっているのが「MCP（Model Context Protocol）」という技術です。これは簡単に言うとAIが外部のツールやデータと連携できるようにする仕組みのこと。MCPを使えばAIがデザインツールと連携してそのままコーディングまでやってくれるという文脈で紹介されることも増えました。ただ、ここで大事な誤解があります。MCPは「AIとツールをつなぐパイプ」であってAIに

こんにちは。今回はThree.jsを使って、妖精が飛び回る幻想的なWebサイトを制作してみました。最近はAIで画像や3Dモデルを作れるようになりましたが、「作った素材をどう活かすか」が重要だと感じています。そこで今回は、AIで作成した森の妖精の3DモデルをThree.jsに読み込み、魔法陣やパーティクル演出と組み合わせたインタラクティブな作品を制作しました。この作品では、・森の妖精が空間を飛び回る・魔法陣がゆっくり回転する・幻想的なパーティクルが漂う・マウス操作に反応する・魔法を描くような体験ができるといった演出を実装しています。Three.jsというと企業サイトや商品展示のイメージが強いですが、今回のようにゲームやファンタジー作品のような世界観を表現することも可能です。個人的には、AIとWeb技術を組み合わせることで、これまでよりも短時間で魅力的なコンテンツを作れる時代になったと感じています。今後は今回の妖精作品だけでなく、・海中遺跡・サイバー都市・宇宙空間などもテーマにしながら、Three.jsを活用したインタラクティブなWeb表現を増やしていく予定です。これからも制作した作品や学んだことをブログで発信していきますので、興味のある方はぜひご覧ください。

AIによるコード生成は、今や多くのエンジニアや学習者にとって日常的なものになりつつあります。「とりあえずAIに聞けばコードを書いてくれる」そんな時代だからこそ、使い方を間違えると大きなリスクにも繋がります。便利だからこそ、正しく使うことが重要です。今回は、AIにコードを書かせる際に注意すべきポイントについて、実務視点で解説します。AIは優秀だが、万能ではないまず大前提として、AIは非常に便利です。・HTML/CSSの作成・JavaScriptやPythonのコード生成・エラー修正の提案・コードレビュー補助こうした作業は大幅に効率化できます。しかし、AIは「正しそうなコード」を生成するのが得意なだけであり、必ずしも「最適」や「安全」が保証されているわけではありません。つまり、出力されたコードをそのまま信用するのは危険です。1. 丸投げしすぎない最も多い失敗が、「全部AIに任せれば完成する」と考えることです。例えば、・仕様が曖昧なまま依頼する・目的を明確に伝えない・生成後に確認しないこの状態では、意図とズレたコードや保守性の低いコードになりやすくなります。AIはあくまで補助ツールです。重要なのは、何を作りたいのかを人間側が明確にすることです。2. セキュリティ面を必ず確認するAI生成コードで特に注意すべきなのがセキュリティです。よくある例として、・SQLインジェクション対策不足・XSS対策漏れ・認証処理の甘さ・APIキー直書き・脆弱なライブラリ提案一見動作していても、本番環境では重大な問題になるケースがあります。特に、・フォーム・ログイン機能・決済処理・個人情報管理これらは必ず自分

LINEを開くとたまに画面に雪が降ってきたり、桜の花びらが降ってきたり、ちょっとほっこりする時ってありますよね。そういうのっていろんな方法がありますが、下記のようにCSSの「animation プロパティ」だけで簡単に実現することができます。今は、ノーコード云々・・・と言われていますが、自分であれこれ調べていじって設定して動くと楽しい。CSSだけでも奥が深いのです。【HTML】<div class="snow">&#9679</div> 【CSS】body{   background: #000; } .snow {   color: snow;   font-size: 8px;   position: fixed;  text-shadow:3vw -100px 1px, 10vw -200px 3px, 15vw -700px 4px, 20vw -500px 7px, 25vw -500px 2px, 30vw -300px 1px, 36vw -400px 2px, 40vw -150px 6px, 47vw -840px 2px, 50vw -300px 5px,60vw -200px 3px, 68vw -100px 5px, 70vw -250px 1px, 80vw -620px 9px, 90vw -800px 4px;  animation: snow 5s linear infinite; } ＠keyframes snow {   0% {     top: 0;   }   100% {     top:

webデザインを勉強したけど、コーダーさんに頼むとどれくらいで作ってくれるかなと考えている人はいませんでしょうか、結論から言えば立幅6000pxで「三日」というのが最速といえるスピードですもちろんこれに反論する人や、内容からいってもっと早くできるだろという人もいるでしょう、しかしxdなどのデザインデータから画像データの吸出しpcサイズが2560pxの大型から1000px以下まで、バランスよく配置できるようにcssの設定など踏まえると「三日」くらいがタイトなスピードと感じます実際私もいくつか案件をうけてきましたが、かなり慣れたわたしでもパソコン対応だけでコーディングしても細かくパソコンサイズが多々ある昨今精度の高い仕事をあげるとなると品質維持して集中してやっても「三日」というのが最速の基本だと思えますコーダーさんに依頼して、予算を控えて頼む場合、最低限以上の品質となると「三日」と見込まれます、またスマートフォン対応(レスポンシブ対応とも言います)も含めるとhtmlのコーディングの段階で考えながら作る必要も生じ最速で「五日」と思ってください。私のほうでもお現在仕事を受け付けていますので1週間ほどいただければ安定した品質で納品いたしますので興味があればよろしくお願いいたします。

こんにちは、Liyです。最近対応したお客様で、「日本地図で各地方の製品の特徴を紹介したい！」というご要望があったので、クリッカブルマップを作成しました。正直クリッカブルマップを実装するの初めてだったので、色々とブログ記事を参考にしたりして、Shopifyのレスポンシブ機能に沿ったやり方を一つ見つけたので、自分のログを残すのと同時に必要な方の助けになればと思い紹介させていただきます。▼ざっくり手順ざっくり手順は以下の通り！1.Illustratorでクリッカブルにするマップの作成2.SVG形式にダウンロード3.SVGファイルの書き換え4.Shoipfyページへの反映TOPページに反映▼完成イメージ詳細の手順STEP1.Illustratorでクリッカブルにするマップの作成上記の通り、レイヤーをURLリンクを分けたい粒度（今回は各都道府県別と日本地図別）に分けて作成。名前はわかりやすい名前を各レイヤーにつけておくと、後からコードを編集する際にとってもとっても便利なので必ず行っってください。💡メモ私の場合、お客様から最初にPDFで画像素材をいただいており、マップのイメージが固まっていたのでちょっと面倒でしたが、初めからSVG素材を探しておくとそんなに手間もかからずに実装できるかと思います。STEP2.SVG形式にダウンロード「ファイル」＞「スクリーン用に書き出し」をクリック形式の設定で「SVG」の縮小、レスポンシブにチェックを入れる💡メモ参考にしたブログサイトでは、「縮小のチェックは外しておきましょう」と書かれているのですが、今回の私の作成したSVG画像のサイズがShopifyページ