すべてのカテゴリ

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

※「サービス出品の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制作が大好きです。 デザイナーの方が丁寧に細部まで仕上げたデザインを丁寧にカタチにするお手伝いをします。 あなたからの連絡をお待ちしております。

最近では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サイトについて不明なことがありましたら、電話相談のサービスもありますので、どうぞお気軽にお声掛けください☆今後ともよろしくお願いいたします。 早苗

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

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

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

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

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

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

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

はじめまして！ フリーランス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◎おわりにお気軽にご相談ください。最後までお読みいただきありがとうございます！

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

効率的なコーディングは、プロジェクトの成功に直結する重要な要素です。ここでは、私がコーディングを効率化するために意識していることをいくつか紹介します。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制作をご提案いたします。何かご質問やご相談がありましたら、お気軽にお知らせください。一緒に素晴らしいプロジェクトを築いていけることを楽しみにしています。

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

私は日ごろはライター兼カメラマンとして活動しています。元は全国紙の記者・カメラマンでした。ほかの多くの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のセミナー動画の中で知ったココナラ。「打ち合わせにも出られないお家時間の活用になるんじゃない」って事で登録。業者対業者っていうより業者対個人っていうのが多いのかな。活用の仕方もだけど、制作費、トンマナ、馴染むまで試行錯誤しそう。活躍している他の人から学ぶかな～（笑）

こんにちは、えーさっぷです。今では、ノーコードツールやWordPress有償テーマの利便性も高まり、専門家でなくてもホームページを作れる時代になりました。その一方で、制作現場ではコーダーが足りないと言った声もお聞きします。やはりデザイン性にこだわったサイトを作りたい方や、会社ブログに加え「事業実績」や「セミナー情報」など細部の痒い部分にまで手が届くものをご要望とされる際には、直接コード記述して制作する必要が出てきます。そういったカスタマイズも承りますので、お困りの際はご相談ください。コーディング業務を負担に感じられているデザイナーさんにも、コーディング外注をご検討いただけると幸いです。自分は逆にデザイン業務を不得手としているので、お互い得意な部分を共有してお客様の悩みを解決する手筈が増えればと考えております。

えーさっぷと申します。今回初めてのブログ投稿となります。プロフィールや出品サービスでは、掲載できる内容も限られているためこちらで改めて自己紹介できればと思います。現在、コーディングメインで活動しております。これまで制作会社に勤めたキャリアはなく、営業や小売店で店長を務めるなど製作者としては少し異例の経歴かも知れません。Web制作の学習を始めたのは2018年です。会社に頼らず自身でも収入を得られるスキルを身に付けたかったからです。ココナラをはじめとするクラウドソーシングにも登録し、おかげさまでこれまで色々な方からお仕事を頂いて参りました。今ではネットやスマホが普及し誰でも簡単に情報が得られる時代になりましたが、その反面ネットの正しい知識がないと良いものを伝えられない時代にもなりました。商品を販売していた側 → 制作する側になった身として、買い手売り手双方が満足できるようこれからも努めたいと思います。このブログをご覧の方で、□コーダーさんを探しておられるデザイナーの方□コーディングを外注してコストを削減したい制作会社様□ホームページのことを相談できる人が周囲にいないとお悩みの方が、いらっしゃいましたら是非ご相談ください。出品サービスへのご質問、ホームページについてお悩みなどございましたらお気軽にお問い合わせください。＊近年、人・アクセス・売上さえ集まれば良いと思わせるサービスや相場価格を逸脱し制作コストを抑えようとするご依頼も散見されますが、そうしたご相談に際してはお力添えができない場合もございます。予めご了承ください。

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

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

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

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ページ

「プログラミングって何から学べば良いかわからない‥」「プログラミングスクールって高額過ぎて踏み出せない‥」そんな風に思っていませんか？　私もそうでした。私は4人子供を育てながら小学校で教員をしていましたご存知のように教員は超絶ブラック。子供に学びを教える喜びを味わいながらも、自分の働く環境について強く疑問を持つようになりました自分を変えたい、新しい技術を学びたい。プログラミングって興味あるけど、何から始めたらいいかすらわからない。独学は挫折の連続。スクールは高額で決心がつかず、迷って動けない時期がずっとありました結局貯金をはたいて、某有名プログラミングスクールに通うことに決めましたそこでの学びは私にとって本当に有意義でした。専属の先生が一つ一つの質問に丁寧に答えてくれて、安心して学ぶことができました。子育て仕事と苦労しながら先生の支えがあってなんとか卒業できましたしかし卒業後に、ある後悔をしました。それは、「スクールが即戦力のエンジニアまで専門性を高められるほどの環境」だからこそ、私のような「基礎基本もわからない初心者にとって無駄に高額すぎる環境」だという気づきです例えるなら初心者にとってスクールは【小学生が算数を学ぶのに大学に通う】ようなもの私はプログラミングを学んだ嬉しさと、どこか満足しきれない思いを抱えて卒業しました。もしこの話を聞いて少しでも興味を持っていただいた方には、私のような思いをさせないように、私がプログラミングスクールに150万円以上費やして学んだ知識・経験から、基礎基本の部分をまとめ、お子さんから大人まで初心者の方にも分かるように、安価な値段でお教えします。

こんにちは、Leycoです。普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。（webページとは、ホームページやLP全般のことを指します）今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。この記事では次のような方を対象に作っています。・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。今回は「webサイトができるまで」の９回目です。【webサイトができるまで⑨】コーディング・構築一般的にwebサイトは、次のような手順で作成されます。今回は、「【４】コーディング・構築」です。「構築」とは、１枚の画像であるデザインをもとに、実際のサイトとしてパソコンやスマホに表示できるようにデータ化すること。構築にはいくつか方法があるので、サイトの目的に合った方法を選ぶことが大切です。構築方法と、選ぶポイントをご紹介していきます。はじめに：「こだわりのデザイン」「修正しやすいデザイン」のどちらを選びますか？構築方法は大きくわけて２種類あります。・こだわりのデザインを実現できる構築方法・後から修正しやすいデザインを作る構築方法サイトを作る時には、最初に、「こだわりのデザイン」を作りたいのか、「後から修正しやすいデザイン」を作りたいのかということを決めます。そして、それぞれの目的に合った

はじめまして、VancLeafのYuiと申します。この度、ココナラでのサービス販売を開始いたしましたのでまず簡単に自己紹介をさせていただこうかと思います。2022年の9月からプログラミングを勉強し始めHTML/CSSを中心に基礎からしっかり学びました。そして同年11月頃よりWeb制作/コーディング代行を副業として皆さまのお手伝いをさせていただいております。2011年よりカナダのバンクーバーに移住し現在もうすぐ9歳の愛犬（Latte）と一緒に暮らしてます。上の写真が愛犬です＾＾日本/カナダ両国での事務職経験があり細かい作業や、情報収集、確認作業などが得意で典型的なA型几帳面な性格です。一人でも多くの”こだわり”を目に見えるカタチにするお手伝いができればと思っております。皆さま、よろしくお願いします＾＾

こんにちは。LP専門コーダーUi-Partner・おりです。昨日はアイコン作成サービスを購入し、素敵なアイコンを作ってもらいました。いろいろなSNSに設定して、眺めてニヤニヤしています。▼ご依頼したアイコン作成サービスはこちら出品者さんの対応もとても親切で、またお願いしたいなぁと感じました。さて、今回はWebサイトにSNSを埋め込みする方法②としてYoutubeの埋め込み方について書いていきたいと思います。▼Youtubeの埋め込み方まず、埋め込みたいYoutubeのページを開きます。①「共有」ボタンがあるのでそこをクリックします。※私がよく拝見している「Webの神様」様の動画をお借りしました。②共有方法を選ぶことができるので「埋め込む」をクリック③埋め込みタグが生成されるので、Webサイトの埋め込みたい位置にタグを挿入します。Youtubeの埋め込みも、とても簡単でした。もちろん、Style属性やCSSで大きさや見た目の変更もできますので、自由にアレンジして皆さんのWebサイトに埋め込んでみてくださいね。自分のWebサイトにSNSを埋め込んでみたい・埋め込んでいるものをカスタマイズしたいなどのご要望がありましたら、お気軽にDMでご相談ください。

コーディングのお仕事を40件近く担当して、依頼内容で多いものをご紹介します。スクロールで画像等の要素が表示されたらふわっと表示させる色々なサイトでも良く見ますね。実装方法はいろいろ考えられると思いますが、私はJavaScriptの「Intersection Observer」を使います。JavsScriptならscrollイベントなどでも実装するのですかね。ご依頼主様からは、処理が重くなる心配をされる方もいますが、重くなる事はないと思います。要素が画面内に入ったら、Intersection Observerでclassを付けて、CSSで処理させるので、実装もしやすいと思います。バーガーボタンクリックでスマホメニュー表示バーガーボタンはCSSで作るのですが、私としては、CSSが少し複雑ですね。before疑似要素、after疑似要素を使って作ります。気を付けているのが、スマホメニューを透過で表示させたときに、メニューを操作に連動して、下層のコンテンツが動いてしまうこと。bodyにposition:flexd;overflow:hidden;width:100%の指定で防げると思います。バーガーボタンクリックで×ぼたんに変形させるのに、transformを使います。Intersection Observerは覚えておいて損はないと思います。お仕事募集中ですのでよろしくお願いいたします。

僕がフリーランスとして活動するために使用している屋号の「Lifement」ですが、Life(人生)とmoment(瞬間)を組み合わせた造語になります。また、「ment」は動作を表す英単語に使われることが多く、人生は常に行動し続けることでより良いものになる。今この瞬間を心から楽しみ、前に進み続けるという意味を込めています。過ぎ去った時間に囚われず、この変化の目まぐるしい時代の中で先の未来を見据えて、今この瞬間を大切にして行動する。お客様とともに瞬間瞬間を全力で楽しみ、未来を明るくする。「Lifement」はお客様に寄り添いWebの力を活かして、時代の変化を楽しみ続けたい。という想いのもと屋号を決めました。僕自身、個人でお仕事を進めることもありますが、チームで開発をしたりして上手く分業し、お仕事を行うことも多々あります。自分の専門スキルを最大限に活かしつつ、得意ではない分野は他の人にお願いしているので、屋号にふさわしく「今この瞬間を心から楽しみ、前に進み続ける」ということを体現できているかと思っております。フリーランスとして活動していて本当にお仕事が楽しいので、今後も日々精進していきます！今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです！！よろしくお願いいたします！

こんにちは、山本佑樹です。今年もあと少しということもあって、慌ただしい日々が続いておりますが皆さまはいかがお過ごしでしょうか。気温も低くなってきておりますので、体調に気をつけて日々お過ごしいただければと思います。さて、タイトルにも記載しましたが、この度12月からプラチナランクにランクアップする形となりました！これもお客様からお仕事を依頼していただいてるおかげなのですが、お客様のお役に立てている、価値を提供できていることが何より嬉しく思います。また、少しでもお役に立てればとの思いからWeb制作を始めましたので、その一つの証としてプラチナランクになったことは素直に喜んでいます。この場をお借りしまして感謝申し上げます。ありがとうございます。ただ、今後は価値提供し続けないとランクが下がってしまいますので毎月少しでもお客様のお役に立てるよう頑張っていきます。Webに関する悩みやお困りごと、それ以外でも何かありましたらまずはご相談ください。引き続き宜しくお願い致します。山本佑樹

初めまして。大阪でWEBデザイナーをしておりますShirokumaDesignと申します。ディレクション、Webデザイン〜コーディングまで対応可能です。 Webや紙の制作物でお困り事があれば、お気軽にご依頼くださいませ♪ ありがたいことに、LP（ランディングページ）制作の依頼を多くいただいております。基本的にはWEBサイトのコーディングをメインで行っているのですが、案件のご依頼が多数あるため、LPのコーディング費用を明瞭化させていただきます。以下、依頼基本的な費用です。お客様にとってベストな提案ができればと思っております。WEBサイト構築がメインのため、合間にLP制作を進めさせていただくかと存じます。納期やスケジュール・費用感などの関係上、お受けすることが難しい可能性もございます。その点はご理解・ご了承くださいませ。ココナラでは「LP専門」のプロがいらっしゃいます。納期やコストなど見合わない場合もあるかと思います。その際は「LP専門」のプロにご依頼いただくのも選択の一つとして、ご一考いただければと存じます。お客様にとって、きっと満足にいくものを仕上げていただけるかと思います。■基本依頼をご検討いただいているお客様の、参考になれば幸いでございます。引き続き、ShirokumaDesignをよろしくお願いいたします。

先月にお客様にランディングページのお仕事を頂戴し、Webページ作成のスキルを落とさないように、仕事の合間を利用して演習しています。そして、架空の整体院を想定して、基本的なウェブページを制作してみました。少し縦に長い画像ですが、左がPC、右がスマホでのレイアウトです。設定で、スマホとPCで表示切り替えができるようにしており、スマホではロゴ・文字揃えを中央、PCでは左揃えを基本としました。▲HTMLソース▲CSSその他JavascriptやJQueryなどでブロック（要素）のアニメーション化をしていきますが、今回は基本的にHTMLとCSSの２つを利用して、直接構文を入力することで組み立ていきます。とはいえ、 > や } などの綴じカッコを忘れてしまったり、悪戦苦闘でしたが…。必要な部分には、<!--◯◯-->や/*○○*/でメモしておけば後々の編集もわかりやすくなります。ちなみに、スマホで開く「ハンバーガーメニュー」がありますが、本来ならJavascript・JQueryで機能させるやり方が一般的ですが、いろいろなサイトを見ていて簡単な作り方を見つけたので、今回はそれにしたがってハンバーガーメニューを加えました。▲paddingとmarginの関係も、ブロックを色付けすることで理解できました。ブロックの内部の余白がpadding、外部がmarginでした。▲表組みも、画像化して載せようかと考えましたが、きちんとHTMLとCSSで組み立て。これもいろいろなサイトをまわって「表組みジェネレーター」を発見。その力を借りてHTMLを加えました。というわけで、少しずつウェブ

Visual Studio Codeは、比較的新しい入力エディタでWEBと言うよりバリなプログラマーユーザーのエディタと思ってます。サクイはmacromediaの頃からのDREAMWEAVERユーザーです。入力補助の温い環境に染まったしまった事もあり、縁のないものと考えていました。ところがたまたま目にした「Web制作で使えるVSCode」みたいな記事。入れてみました。Wordpressの管理画面から手入力もしてるんで、特に抵抗も無く使えそう。軽いし、良いわ、コレ（笑）保存時、勝手に整形してくれるんでインデントもキレイ。プラグインも豊富。SCSSの階層もわかりやすい。編集先に移動しやすい。まだ2つのエディタを行ったり来たりだけど、VScodeメインになる日が来たりして。グラフィックもあるんでフォトショとイラレは必要なんで、Adobeのプランはやめられないけどね（笑）

今日も朝からデザイン、コーディング、ググってネタ探し。で、こんな便利なオンラインツールを見つけた。uigradients.com　※リンクできないのでゴメンね。背景グラデ。結構調整が面倒いけどココで探せばOKってね（笑）さぁ、昼からは新しい案件の原稿考え始めるかね。

WEBサイトのコーディングの案件させていただけて自分の勉強にもなるし、なにより依頼者様に喜んでもらえるのがなにより励みにもなるってこんなにも気持ちがいいものとは、会社で普通に仕事するのとはまた違って楽しいものですね。まだまだWEBサイトのコーディングやホームページとか作っていきたいと思います。もしよかったら私のサービス購入していただけると幸いです。

ホームページ制作・コーディング代行サービスを出品しました！ デザインデータからのコーディング代行をご検討されている方がいらっしゃいましたら、ぜひ一度ご相談ください！ また、サービスとしてはまだ出品しておりませんが ・ブログをはじめたい人 ・自分のWebサイトを作ってみたい人 ・ポートフォリオサイトを持ちたい人 上記のような人に向けて１からのWebサイト制作も承っております。 気になった方はぜひお気軽にご相談ください(^^)

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

近年、AI技術の進化によって「Web制作の仕事はなくなるのでは？」という声を耳にする機会が増えました。実際、AIを使えば簡単なデザイン案の作成やコード生成、文章作成まで自動化できる時代になっています。しかし、結論から言えば、AI時代になってもWeb制作は不要にはなりません。ただし、その役割や求められるスキルは確実に変化しています。AIによって変わるWeb制作の現実これまでWeb制作では、以下のような作業に多くの時間が使われてきました。コーディングデザイン制作文章作成画像生成SEOの基本設計現在では、これらの一部はAIによって大幅に効率化されています。例えば、HTML/CSSの自動生成デザインのたたき台作成キャッチコピー提案ブログ記事作成画像素材生成など、以前よりも制作スピードは格段に向上しました。つまり、単純作業だけを提供しているWeb制作者は、今後価格競争に巻き込まれやすくなる可能性があります。それでもWeb制作者が必要な理由AIは便利ですが、万能ではありません。企業や店舗が本当に求めているのは「ホームページそのもの」ではなく、集客できること問い合わせが増えること売上につながることブランド価値を高めることです。ここで重要になるのが、誰に、何を、どう伝えるかという戦略設計です。AIは指示された作業は得意ですが、顧客心理の理解業種ごとの競合分析地域特性成約導線の最適化クライアントとの細かな調整といった部分は、まだ人間の経験や判断力が強く求められます。今後生き残るWeb制作者の特徴AI時代に価値が高まるのは、単なる「作る人」ではなく、「成果を作る人」です。必要になるスキルマーケティ

1. はじめにこんにちは、LP制作をおこなっているFujita Design Worksです。新しく講座やセミナーを立ち上げる際、やることが多すぎて目が回りそうになっていませんか？講座カリキュラムの作成スライドやレジュメの準備受講生への案内文の作成これだけのタスクをこなしながら、さらに「LP制作のディレクション」まで自分で行うのは、控えめに言っても限界がありますよね。特に、「デザインはAさん」「コーディングはBさん」と別々に依頼するのは、時間も手間も2倍かかってしまいます。2. 別々に依頼する時に起こりがちな「3つのトラブル」実は、デザインと実装（コーディング）を分けることで、以下のようなトラブルがよく起こります。話が通じない： デザイナーとコーダーの間に入って、専門用語をあなたが橋渡ししなければならない。デザインが崩れる： 「Photoshopで作った綺麗なデザインが、いざ実装されたら別物になっていた」という問題。修正に時間がかかる： 「ちょっと文言を変えたい」だけなのに、AさんとBさんのスケジュール調整で何日も待たされる。3. だからこそ「一気通貫（ワンストップ）」が選ばれる理由私の制作サービスでは、デザイン（Photoshop）から実装（HTML/CSS）まで、すべての工程を私一人が責任を持って担当します。一気通貫で制作することには、多忙な主宰者様にとって大きなメリットがあります。窓口が一本でラク： 打ち合わせや連絡は私一人とだけ。要望のズレがありません。デザインの完全再現： 「なぜそのデザインにしたのか」を把握した上でコーディングするため、細部のこだわりまで100%We

Figma、WordPress、Studio……。今の時代、Web制作やデザインを支える便利なツールは溢れています。SNSを見ていても「Studioで簡単にWebサイトを作った」という声はたくさん流れてきますよね。もちろん、それも一つの素晴らしい選択肢です。しかし、私が実際にWeb制作・デザインの道を歩む中で痛感したのは**「学習の順番は、驚くほど重要だ」**ということ。今回は、私がStudioというノーコードツールを触ったときに「なぜこんなにも感動したのか」、そして「なぜ最初にコーディングを学ぶべきだと思ったのか」について、正直な感想をブログに残しておきたいと思います。50時間の「苦闘」が教えてくれたものStudioを本格的に触る前、私は約40〜50時間を費やして、徹底的にコーディング（HTML/CSS）を学習しました。ゼロからWebサイトを構築する作業は、決して楽な道のりではありませんでした。<div>タグを重ねてレイアウトを組むリストタグで構造を作るFlexboxを使って要素を整列させるこれらをひたすら模写し、コードを書いてはブラウザで確認する。地道な作業の繰り返しです。「なぜここがズレるんだ？」と頭を抱える時間も長かったです。しかし、この「地道に構造を組み立てる」という苦労こそが、私の学習における最大の財産でした。「コーディングを知っている」からこそ、Studioの凄さがわかるコーディングを叩き込んだ後でStudioを触ったとき、私は正直に言って衝撃を受けました。「え、これだけでいいの？」「コーディングであれほど悩んだレイアウトが、クリックとドラッグで完結す

初めまして！私crane7112(クレイン)と申します。初めてのブログです。誰にも見られてないですが書きます！未来のために笑簡単な経歴としては地元舞鶴の高校を出たのち浪人生活を経て神戸大大学に進学いたしまいました。大学では毎年扶養ぎりぎりまで働き、ほぼほぼフル単位の勤勉学生でした。5年間ほど牛角で働いててアルバイトリーダーになるまで働きました笑その後は大学院まで進んで例にももれず毎日毎日研究・実験しておりました。この時はセンサーの研究をしていたのでキーエンスとかちゃんと知ってたら今頃大金持ちなのになと思ったりします笑その後塾に就職しましてここでは副教室を任せていただきた、この時は生徒の成長、塾の成長、会社の成長が見るのが楽しかった。会社の若手枠ということでかわいがってもらいました。日々成長する生徒に感動しながら、業務の改善・効率化していたのが今の仕事につながっています。皆様のサポートだったり持っていない知見を提供し、個人として会社としてますます大きくなっていきたいです！！鶴村

「ローカルでは綺麗に表示されていたのに、公開したらレイアウトが崩れてしまった…」そんな経験はありませんか？ホームページ制作では、ちょっとしたコーディングミスが大きな表示崩れにつながることがあります。今回は、コーディングでよくやりがちなミスと、その対策をご紹介します。よくやりがちなミス1. パスの指定ミス（相対パス・絶対パス）CSSや画像、リンクなどのパス指定で、「./」「../」「/」などの使い分けができていないと、ファイルが読み込まれずデザインが崩れます。対策：・フォルダ構成をきちんと整理する・ブラウザの「検証ツール」で読み込みエラーを確認2. CSSのセレクタが正しく機能していないHTMLとCSSのクラス名が一致していなかったり、継承関係が複雑すぎると、意図通りにスタイルが当たりません。対策：・クラス名のスペルミスに注意・開発段階では極力シンプルな構成を心がける3. ブラウザによる表示差を考慮していないChromeではきれいに見えても、SafariやEdgeでレイアウトが崩れる…ということはよくあります。対策：・各ブラウザでの動作確認を必ず行う・CSSリセットやNormalize.cssの導入も検討4. レスポンシブ対応が不完全スマホで見たら横スクロールが出る、要素がはみ出すなどの問題は、メディアクエリや幅の指定ミスが原因です。対策：・max-width: 100%やbox-sizing: border-boxの使用を検討・実機・エミュレータでの確認を忘れずに5. タグの閉じ忘れや入れ子ミスHTMLタグを閉じ忘れたり、入れ子の順番を間違えると、レイアウト全体に影響します。対

皆様はじめまして！ご覧いただきありがとうございます。「こうな」と申します。個人事業でWeb制作のコーディングを担当しております。【 こうなについて 】前職は医療機関や製造業で10年ほど経理を担当しておりました。その頃から、レスポンスの速さと仕事の速さを評価していただき、また、現在の仕事のスタンスでもあります。もともとプログラムをすることに興味があり、基礎を学んで「私に合う」と確信しました。オンラインスクールの受講を始めてからは、張り付くようにコーディングを続けていました。それから個人事業のWebコーダーになることを決意し、現在に至ります。私はテキストコミュニケーションには力を入れております。なるべく短く、わかりやすい文章を心がけています。気になる点は些細なことでもお気軽にお問い合わせください！徹底した品質チェックをし、高品質なサイトでお客様が結果をだせるように、サポートいたします。【 サービスについて 】・デザインカンプからのコーディングをいたします。・デザインカンプがPCのみの場合でもレスポンシブ対応可能ですので、お気軽にご相談ください※。※イメージのすり合わせのため、いくつか確認させていただくことがあります。・WordPress構築、オリジナルテーマでの制作も可能です。・カスタマイズも対応しております※。※場合によってはオプションになります。ご相談ください。・その他、修正対応もしております。【 スキル 】・HTML・CSS（SCSS）・JavaScript（jQuery, GSAP）・PHPデザインデータはFigma, XD, Illustrator, Photoshopと

プログラミングに正解はないプログラミングを始めたばかりの頃、「正しい書き方って何だろう？」と悩んだことはありませんか？実は、プログラミングには数学のように1つの絶対的な「正解」はありません。同じ結果を得るためのアプローチは無数に存在します。例えば、A地点からB地点に行くのに電車を使う人もいれば、バスや自転車を使う人もいます。同じ目的地に着くなら、どの手段を選んでも間違いではありません。プログラミングもこれと似ています。でも「綺麗なコード」はある「正解」がないなら、どんな書き方でもいいの？と言われると、そうではありません。プログラミングには 「綺麗なコード」 という概念があります。綺麗なコードとは…・読みやすい: 他人が見てもすぐに理解できるコード。・メンテナンスしやすい: 修正や追加がしやすい構造になっているコード。・効率的: 必要以上に重くなく、動作がスムーズなコード。これを目指すことで、あなたのコードはより価値のあるものになります。綺麗なコードを書くための3つのポイント1.コメントを適切に使うコードだけで全てを伝えるのは難しいこともあります。重要な部分や複雑な処理にはコメントをつけ、他人や未来の自分が理解しやすくしましょう。2.コードをシンプルにする同じ処理を何度も繰り返す場合は、関数を使ってまとめましょう。シンプルなコードはエラーを減らし、メンテナンスもしやすくなります。3.コーディング規約を守るプログラミング言語には推奨される「書き方」があります。例えば、インデントの使い方や変数名の付け方など。これを守るだけでも、ぐっと綺麗なコードになります。綺麗なコードを書くと何がい

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コーダーsacoと申します。2020年よりコーダーとしてのお仕事を開始以来、制作会社での業務や、クラウドソーシングサービスを通じて、今まで数多くのホームページ制作に携わって来ました。コーダーに転身する以前は、長年接客業に携わっておりましたので、その経験を活かしお客様とのコミュニケーションをスムーズに行えるよう努めております。出品サービス内容でお力になれることがございましたら、ぜひ一度お気軽にご相談ください。以下、サービス内容・料金についての一覧表を作成いたしました。お見積りのご参考になりましたら幸いです。基本サービス内容・料金オプションサービス内容・料金基本メニューはコーディングとしての出品ですが、サイト公開後設定のみや、レスポンシブ化のみのご依頼も喜んで承っております。上記内容でご不明な点がありましたら、お気軽にご相談ください。

ココナラでもっといろいろ活動してみようと思いブログを書き始めました役立つこととか、気になることがあったらいろいろ書いてみようと思います

Webレスキューと申します。私は普段、webサイトの制作や修正を制作会社さんから承っています。初心者ってことはバレる？そんな私のところにはコーディング経験の少ない方に任せてしまい、デザインと全く違うwebサイトが納品されてしまった。修正して欲しい。という依頼が割と飛び込んできます。確かにデザインと明らかに違う。いや、もはやCSSを見る限りアレンジしている！？日本人だけど「oh my God!」でしか表現できない。本当にそんな状態なんです。初心者ということはバレてしまいます。それはなぜか？注意するべき場所がわかっていないからです。大枠のデザインを実現することで頭がいっぱいです。細部のwebサイトの印象を決定づける場所に全く力を振り向けられていません。自分はそんなことあり得ないと思うあなたに今日はどんなところで初心者とバレてしまうかを手始めに3つお伝えします。初心者とバレてしまうポイント3選①要素間の余白が異なる②フォントが異なる③ウィンドウの伸び縮みを考えてないこの3つは初心者が最もミスをする点と言っても過言ではありません。この3点がかなり大事であると言うことに気づいていないのです。一つずつ解説させてください。①要素間の余白が異なるデザインの基本４原則に近接と言う考え方があります。人間は近くに置かれた情報をグループとして認識する傾向にあります。これを利用して要素の間隔から情報を伝えやすくデザイナーの人は考えています。また、要素同士を揃えることはレイアウトの基本です。揃えることでまとまりが生まれ、秩序あるデザインとなります。デザインに唯一の正解はありませんが、秩序が保たれてこそ美し