すべてのカテゴリ

当ブログをご覧いただきありがとうございます。きいとデビのweb制作です。コーディングどうする？そういえばウェブ制作を学ぶときにですね、スクールを探したことがありまして、デザスクだっけかな？ある説明会で、デザインだけ勉強すればコーディングはAIがするから知る必要ないって言われたことあるんですよ。そーなのか！AIは完璧にコーディングをしてくれるのか。そう思ったんですよ。でも、完璧にはならないよ。とも言われたわけです。え？じゃあ残りはどう補うの？？？気になって質問したところ…我々講師に質問するか、メンターにお願いするか、コーダーさんにお願いするか。どーいうこと？？結局、誰かにお願いするってこと？と、思ったわけです。私はそこで学ぶことをお断りしました。実際、デザインだけで稼いでる人も沢山いるかもですが、折角ならコーディングも知りたい。そう思って、それを学ぶことにしました。コーディング知って良かった！デザイン一本で頑張りたい！そんな感じじゃなかった私は、HTML→CSS→JavaScript→デザインという順番で学んでいきました。車の免許ですら、みながオートマの中、マニュアルを受講した私。限定されるのがイヤ！そんな私なのでコーディングを学ぶことが無駄だとは思いませんでした。むしろ知って良かった。以前、上司がPowerAppsなるもので、自社アプリを開発していました。私は色々教えてもらいましたが、そこに書いてある英語たちが何を意味しているのかわかりませんでした。（単語の意味はわかるんだけど、、、）それが！気が付けばわかるんですね～共通なんですね～～何気に最近上司のモニター覗き込んで感動して

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

ブログを見てくださりありがとうございます！sakiyou3です。 エテリア様の練習課題第6弾が完成です！ 今回のテーマはフェイシャルエステとなります🌹✨ ポートフォリオ用サイト「フェイシャルエステ Rose」 https://coconala.com/mypage/user/portfolios 【担当】 PC版デザイン(ワイヤーフレーム)：エテリアオンライン様 レスポンシブデザイン(タブレット版・SP版デザイン) ：sakiyou3 コーディング(HTML、CSS、JS)：sakiyou3 次回はいよいよ社員コースの昇格試験を受けることになりました…！（ドキドキ💦）期間空いてしまいますが4月末ごろに試験を受ける予定です🔥一発で合格できるよう頑張ります‼️

ブログを見てくださりありがとうございます！sakiyou3です。 エテリア様の練習課題第5弾が完成したのでポートフォリオとして公開しましたー！ 今回はダイニングバーとなります🥩🍷 ポートフォリオ用サイト「エテリアダイニングバー」 https://coconala.com/mypage/user/portfolios/822930 【担当】 PC版デザイン(ワイヤーフレーム)：エテリアオンライン様 レスポンシブデザイン(タブレット版・SP版デザイン) ：sakiyou3 コーディング(HTML、CSS、JS)：sakiyou3 今回の練習課題を終えてから社員コースに挑もうと思っていたのですが、まだコーディングスキルが足りてないと実感したので、もう1つ練習課題をすることになりました。今度こそクリアして社員コースにいけるように頑張ります…！

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

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

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

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

こんにちは。webコーダーの橋本です。今日は、初心者でも楽しく学べるHTMLの基本についてお話しします。HTMLって何？と思う方もいるかもしれませんが、心配無用！一緒に基本を学んでいきましょう。少しでも興味がある方は、お気軽に見てみてくださいね！HTMLって何？HTMLは、HyperText Markup Languageの略で、ウェブページを作るための言語です。ウェブページは、このHTMLによって構築されています。HTMLは、ブラウザ（ChromeやSafariなど）が理解できる言語で、ウェブページの骨組みを作ります。 基本的な構造HTML文書は、以下のような基本的な構造を持っています。<!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>ページのタイトル</title> </head> <body>     <h1>これは見出しです</h1>     <p>これは段落です。</p>     <!-- ここにさらにHTMLコンテンツを追加できます --> </body> </html>上記の簡単な説明↑<!DOCTYPE html&

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

こんにちは、Leycoです。普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。（webページとは、ホームページやLP全般のことを指します）今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。この記事では次のような方を対象に作っています。・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。今回は「webサイトができるまで」の９回目です。【webサイトができるまで⑨】コーディング・構築一般的にwebサイトは、次のような手順で作成されます。今回は、「【５】サイト公開・運用」となります。はじめに：webサイトは公開してからが大切です！今回でwebサイトが完成しますが、本当のwebサイトの目的はここからです。webサイトを通してかなえたいゴールのために、webサイトを良好な状態に保っておかなければなりません。今回はwebサイトを運用していく上で、気にしておきたい大切なポイントをいくつかご紹介いたします。【サイト運用のポイント１】サイト修正・管理完璧な状態を目指して作って公開したwebサイトですが、公開後に修正が入ることも色々とあります。あまりひんぱんに変えるのも良くないですが、文章の修正など、ある程度は仕方ないのかなとも思います。また、WordPressを使用している場合、テ

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

こんにちは、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の組み込みもお手頃価格で承ります！(＾-＾)ノご検討、心よりお待ちしております！

今回はよく使われているテキストエディタ「Visual Studio Code」でのスニペット登録を説明したいと思います。スニペットとはコード群を予めスニペットに登録することで短いコードで簡単に呼び出せる機能です。普段からよく使うコードや、長いコードを毎回 1 からコードを入力するのは大変なので、そういったコードを短縮して出せるようになるとコーディングスピードの向上に繋がります。よく使うネーミングでいえば、PCやスマホでいう「ユーザー辞書」のようなものです。スニペット登録の方法実はこのスニペット登録は、すでに色んな人がやり方を書いています。僕も最初にやる時は色々な登録方法を探していくつも目にしています。なのになぜこのテーマで書こうとしたかといえば！この機能、初心者の内から使いたい機能だと思います。ですが、初心者あるあるでここで詰まってしまう方が一定数いると思っています。僕もその一人。。。そして身近な人からも相談を受け、同じ方法で解決出来たことを知って、これは時間の無駄だ！と思い、ある1箇所を特に強調してお伝えしたいと思います。それではいってみましょう！１. 　「Code」→　(歯車マーク)　→「ユーザー スニペット」を選択。2. 　検索欄で登録したいスニペットの言語を入力し、選択します。　　（今回はHTMLの登録と仮定して「html.json」を選択）さて、ここで問題の場所がやってまいりました。みなさん説明の中で少しずつ違いはあるものの概ね同じような説明をされています。上の画像の部分にサンプルコードが入っていますが、これは実はあってもなくても変わりません。人によっては全部消してか

rubyタグとは、漢字や英単語など読みづらいものにルビを付けるためのタグになります。仕事で使う機会があったので、簡単に説明しようと思います。<ruby>とは・ふりがなを使うためのタグ<ruby>、<rt>、<rp>があり、ふりがなを入れるだけなら<ruby>と<rt>でも使用可能です。のような表記になります。といったように、<rt>の中に入れたい振り仮名を入れて、それを<ruby>で囲う必要があります。・<rp>は<ruby>に対応していないブラウザで表示する文字を指定するためのタグです。のように、非対応の場合実際の文字列の後にふりがなが並んでしまうため、非対応時だけ　（）を入れて対応することが多いです。現在の対応ブラウザ現状は古いブラウザでは非対応となっており、使う際は出来る限り<rp>で対応するのが無難だと思います。

今日は私がコーディングをする際に心掛けているポイントや習慣について共有したいと思います。1. シンプルさを追求する複雑なコードは、保守が困難で、バグの原因となることが多いです。常にシンプルさを追求し、不要な機能やコードの繰り返しを避けるよう心掛けています。2. コメントを適切に残す自分が書いたコードは、数ヶ月後や他の開発者にとって読みにくいものとなる可能性があります。そのため、コードの目的や処理の詳細をコメントで残すことで、後から見返した際の理解を助けるよう心掛けています。3. リファクタリングを恐れない技術が進化する中、常に最適な方法でコードを書き直すこと（リファクタリング）は必要です。より良い方法を見つけたら積極的にコードを改善するよう努めています。4. テストを書くバグを未然に防ぐため、テストコードを書くことを重視しています。テストは、コードが期待通りに動作するか確認する手助けとなり、安心してリリースできるようにします。5. 継続的に学習する技術は日々進化しています。新しい技術や手法、ベストプラクティスを学び続けることで、常に自分のスキルを更新しています。6. コードレビューを大切にする他の開発者からのフィードバックは、自分の盲点を指摘してくれる貴重なリソースです。定期的にコードレビューを受け、自分のコードの質を向上させるための意見を積極的に取り入れています。まとめコーディングの背後には技術だけでなく、情熱、継続的な学び、そしてコミュニケーションがあります。日々心掛けているこれらのポイントは、より質の高いサービスを提供するための基盤となっています。これからも皆様に満足して

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

2023年7月11日（火）HTML/CSSコーディングサービスを出品して38日目。みなさん、いかがお過ごしでしょうか。web制作コーダー2年目ひーちゃんです。転職活動及び引っ越しなどで更新ができておりませんでした・・・当テーマでの投稿は5回目になりますが、サービス出品日からは38日が経過しております。申し訳ありません。それでは約1ヶ月寝かせた（意図的ではない）サービスの検索結果を確認します。ログアウト状態の検索で、表示ページ数：7ページ目（前回７ページ目）でした。ちなみに前回も同じくログアウト状態で７ページ目。正直あまり落ちていないことに驚きましたが、ログイン状態だと、表示ページ数：5ページ目(前回：4ページ目)でした。総じてあまり大きな変動はなかったことがわかります。この結果と比較するためにも、一旦ブログを短くても更新していきます。また、こちらのブログとも関係しますが、私が管理するコーディング依頼専用サイトにブログ機能を追加し、こちらの記事と同じものを投稿できるように構築していきます。ブログ内に別サイトのURLを貼ることはココナラ規約上よろしくないので、興味がございましたら、メッセージにてご連絡お願いいたします。それでは

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

※「サービス出品の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制作にハマったきっかけについて、今日は書き記していこうと思います。私は、「行動力」については人一倍の自信があるのですが、その原動力は何か。それは、「あったらいいな」という思いでした。「同期と交流できる機会があったらいいな」と思ったので「全国から集まる同期でLINEグループを立ち上げ交流会を企画」。結果、交流が密になり、過酷な訓練も皆で乗り越え、その年の中で最も団結力があるグループと講師陣に言われました。（ちなみに、4月6月8月10月入社組でわかれていました。）アルバイトで入った飲食店で「マニュアルがあったら新人教育にかける時間を短縮して効率化できるのになぁ」と思ったのでマニュアルを作り実現。その後そのマニュアルがずっと使われていたそうです。海外のお客様がよく来店される店舗で「英語の接客用語がわかれば誰でも対応できるのになぁ」と思ったので、「英語の接客用語一覧を作成し店舗に設置」海外のお客さんが来てもどのスタッフでも安心して迎えることができるようになり、顧客満足度も向上。「HPがあったらブランド力も上がるのにね。でも予算が合わないよ」とオーナーが呟いたので、「私ができる方法はないかな？」と考え、ノーコードサイトで作成しオリジナルドメインを取得し運用すること2年。「違う店舗でもHPが欲しい」ということで、せっかくなら自信を持って「私が作りました」と言えるようになりたい！と思い、コーディングの世界へ。そこから、オンラインスクールで1ヶ月基礎を勉強し3ヶ月独学で勉強しながら、HP制作を完了。すっかりコーディングの虜になっていました。きれいに整った

当ページをご覧いただきありがとうございます！石川県金沢市でWEBデザイナー・コーダーをしております、やしぼう と申します！LPやWebサイトのデザイン～コーディングを承っております。お見積りは無料で対応しておりますので、お気軽にご相談ください！今回は特に多くのご依頼を頂いておりますLPのコーディング代行サービスについて、詳細な費用感をご紹介させていただきます。お問い合わせの際の参考になれば幸いです。基本料金基本料金の詳細料金設定の意図についてご覧の通り、多くの内容が基本料金に含まれています！他の類似サービスですと、以下のように個別に料金設定がされているケースがありますのでトータルでお得にご依頼いただけます。■他類似サービスの料金設定例・8000pxまでが基本料金で以降1000pxあたり1,000円追加料金・CSS/javascriptによるアニメーションを1か所あたり3,000円追加料金など。このような料金設定をすると、制作されるデザインに何かしらの影響を与えてしまい本来目指していたデザインが作れないといったことが懸念されます。（例えば、追加料金になるからこのセクションは少し縮めようorアニメーションの数を減らそう、など。）もちろん長いLP、アニメーションが多いLPが優れているということではないのですが、コーディングの料金がデザインに影響を与えるのはよくないと考えていますので、当サービスの料金をこのように設定させていただきました。やしぼうデザインでは、相見積もり目的のお問い合わせも歓迎しております。十分にご検討いただき、納得されたうえでご購入いただきたいと考えております。高評価

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

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

Webデザイン、HTML/CSSコーディングを出品しています！向日葵です！今回はナビゲーションメニューの装飾について書いてみました！選択中のページがどれなのかさらにわかりやすくするべく、選択中は文字の色を白くし、アンダーラインでの装飾に挑戦しました。この手法は多くのサイトで見られますよね。さらに、カーソルを持ってきた際の色も変わるように設定してみました！こちらの画像は会社概要にカーソルを合わせた際の挙動です。しかし、この変更のみでは色がチカチカと点灯する(黒→白)ような感じで色が変わる為、あまりオシャレではありません。その為、カーソルを合わせた際にアニメーション(じんわりと色が変わる)を付けました。アニメーション一つでかなり印象が変わる為、ナビゲーションメニューも大切に作っていきたいですね！

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

いつレンタルサーバーを契約しようか悩んでいる私です。今日もポートフォリオページについてお話しようと思います！見出しにもあるとおり、profileを修正しました！ただ文字が羅列しているだけだと、面白みがないな～と思い、配置を変更してみました。また背景も白に変更し、シンプルにしてみました。作業中、テキストを横並び配置に設定できた時、なんだかものたりないな～と感じまして、ココナラの私のポートフォリオを見ていただくとお気づきいただけるかと思われますが、名前と自己紹介文の間にゴーストさんを配置してみました！ブログの背景が白いので、ゴーストさんを貼り付けたようになっていますが、スクリーンショットです！こちらのゴーストさんは10月31日、ハロウィン当日が終わるまでいてもらおうと思います！ちなみにですが、今はまだこちらの自作ポートフォリオサイトは公開していないので見ていただくことはできません…！その間にコーディングスキルを磨き、素敵なポートフォリオを作れるように学習を進めていきます。

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

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

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

はじめまして！シャイニーゆうと申します。この度はわたしのページを閲覧いただきありがとうございます。現在、わたしはサラリーマンをしている傍ら、コーディングをメインとしたフロントエンドのWeb制作を手掛けております。【出品している案件を紹介】▷先着3名！基本料3000円でコーディング代行しますココナラで実績を積み重ねていきたいという思いから、初出品ということもあり、「先着3名様限定」で最低料金の3,000円に設定しました。もちろん、スピーディ・丁寧・真摯な対応を心がけて取り組ませていただきます！【これからについて】今はコーディングが主ですが、デザインの勉強もしつつ、対応できる裾野を広げていきたいと考えていますので、一度ご依頼いたいた後も継続的なお付き合いをしていただけると非常に嬉しいです。「こんな対応は可能か？」「継続的に対応してほしい」などなど、お気軽にご相談ください！それでは、これからどうぞよろしくお願いいたします。

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

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

皆さま、初めまして。 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でご相談ください。

こんにちは。LP専門コーダー　Ui-Partner・おりです。今回は、前回に引き続きOGP設定について。SNSでの表示について書いていきたいと思います。▼前回の記事はこちらOGP設定とSNSでの表示確認さて、前回「OGP設定」について「SNSなどでWebページのURLがシェアされたときに、画像や説明文を表示させるための指定」ということを書きました。具体的にはタイトル・説明文・画像等が指定できるのですが、これらを指定した場合各SNSでどのように表示されるのかを確認してみます。▼Facebookの場合「シェアデバッガー」を使い、OGP指定をしたサイトのURLを入力することでFacebook上での表示を確認できます。▼Twitterの場合「Card Validator」にサイトURLを入力することで確認できます。まとめWebサイトの種別問わず、SNSでのシェアは日常的に行われます。SNSのユーザーが思わず「訪問してみたい！」と思うような魅力的なOGP設定ができれば、それはサイト運用にあたっての大きな力となるはずです。あなたのWebサイトにもぜひOGPを設定してみてください。広告運用も見据えたLPコーディングは、おまかせください。

こんにちは。LP専門コーダーUi-Partner・おりです。本日からはSNSでの運用やご紹介を考えているWebサイト向けの「OGP設定」について何回かに分けてお話をさせていただきます。OGPとは「Open Graph Protocol」の略で、SNSなどでWebページのURLがシェアされたときに、画像や説明文を表示させるための指定です。先日記事にした「meta要素」のprotocol属性の中で指定します。例としては、下記のような内容の指定が可能です。・”og:title”：ページタイトル・”og:description”：ページの説明文・”og:image”：表示されるサムネイル画像これらを適切に設定することで、SNSでシェアした時の見栄えや伝わる情報をコントロールすることができます。次回は、実際にOGPを指定した時のSNSでの表示についてお話していきたいと思います。運用にも配慮したLPのコーディングのご要望がありましたら、ぜひお問い合わせください。

こんにちは。LP専門コーダー　Ui-Partner・おりです。LPコーディングのご依頼を受けるにあたって、「コーダーでもデザインの基礎は知っておくべき」と感じることが多々あります。なぜここに余白があるのか、どうしてこことここでフォントサイズが違うのか、「見出し」と位置付けられる部分はどこか、などデザイナーさんの意図を考えるためにも基礎知識は重要だと感じます。そんな中、いくつか書籍でデザインの基礎に触れてみましたので少しずつアウトプットしていきます。「なるほどデザイン」　著者：筒井美希さん評判の通り、ノンデザイナーの最初の一冊にかなりおススメの内容でした。「デザインの４原則」に関する内容ももちろん含まれているのですが、私個人としては理論的なことよりも「デザイン検討のフロー」が学べたのが嬉しかったです。デザイナーさんには当たり前のことですが、・誰に・何を・なぜ・どうやって伝えたいかを考えるところからデザインがはじまること。「再現性」だけを考えてコーディングを行うと機械的になりがちですが、本来「伝えたい相手」と「伝えたい内容」があってのデザインカンプである。そう考えるだけで、１つ１つのデザインの意図・一貫性を読み取るヒントになるように感じます。また、数ある情報の中からLPのデザインとして表れてきたテキストはクライアントさんの「LPを作る目的」につながっていることも実感しました。作り手にとって・使い手にとって良い制作となるよう知識をつけていきます。ちなみに、この著者の筒井さんはVoicyでの発信もされているとのことで、そちらも気になるコンテンツ盛りだくさんです。気になった方はぜひ検索し

こんにちは。LP専門コーダー　Ui-Partner・おりです。今日は、HTMLのきほんと題して、meta(description)要素についておさらいします。meta(description)要素でWebページの内容を分かりやすくまとめておくことで、検索してきたユーザーにWebページの中身が正しく伝わります。▼「meta要素」とは？MDNでは下記のようにまとめられています。<meta>: 文書レベルメタデータ要素 HTML の <meta> 要素は、他のメタ関連要素 (<base>, <link>, <script>, <style>, <title>) で表すことができない任意のメタデータを提示します。要するに、「このHTML文書に関する情報」をmeta属性によって文書の中（Webページの表には出ない部分）に記録することができるということです。今日のテーマである「description」以外にも様々な属性を用いてHTML文書の情報を記録することができます。（例）・charset属性：このWebページがどの文字コードを使用しているかを記載・name属性：Webページの作者名や説明、ビューポートなどを記載できま　　　　　　す。今日のテーマの「description」はname属性に含まれます。▼meta(description)属性と検索エンジンでの結果表示では、meta(description)属性はユーザーにどのような情報を伝えるのでしょうか。Googleで「ココナラ」を検索すると下記のような

こんにちは。LP専門コーダーUi-Partner・おりです。本日はLPではないのですが、ハンドメイド出店を開始する友人からのご依頼でブログサイトを作成したのでそのお話を。WordPress無料テーマ「Kale」をベースに、友人の好みや作品のコンセプトなどを聞きながら楽しくカスタマイズできました。＜相談しながら決めたこと＞▼テーマの選定「どんな人が」「どんな状況で（デバイスで）」見てくれると嬉しいかを想像しながら一緒にテーマを選びました。▼配色の選定「PALETTABLE」を使用して、好きな配色を選んでもらいテーマ内に配置。とにかく楽しく使ってみる！のが目的なので、好きな配色で。▼ヘッダー画像の選定こちらは友人がすでにイメージ画像を持っていたので、作成者の承諾を得て配置。ブログタイトルのフォントもイメージを聞きながらGoogleフォントを用いました。▼Twitter埋め込み活動拠点がTwitterだったので、ツイートが表示されるよう埋め込み。iframeで簡単に実装できるのはとても便利です。使う人も見る人も、ワクワクするツールになればいいなと思います。「簡単に好みのブログサイトを作成したいな」というご要望がありましたら、DMにてお気軽にご相談くださいませ。

こんにちは。LP専門コーダーUi-Partner・おりです。本日、ココナラにてLPコーディングのサービスを出品いたしました。・LPのデザインをしているけれど、コーディングの負担を減らしたい…・「既存サイトのちょっとした修正」「ちょっとしたお困りごと」に対応してくれるコーダーと提携したい…・もともとコーディングは専門外なのでパッケージでお任せしたい…そんなLPデザイナーの方がいらっしゃいましたら、ぜひご検討くださいませ。個別の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は覚えておいて損はないと思います。お仕事募集中ですのでよろしくお願いいたします。

はじめまして。ご覧にいただき、ありがとうございます。コーディングしてWebサイト・ホームページを作ってる、「ふる」と申します。Web制作会社さまや、個人デザイナーさまと、お仕事をさせていただいてます。これまで制作したものとしては、・１〜２ページのページ・3ページ以上の複数ページ、・ランディングページ（LP）・大規模Webサイトのチーム開発などです。また、Web業界に関わる前は、飲食店やクリーニング店で・店舗運営、店舗サポートなどのマネジメント職・社内研修講師・職人を経験し、様々な職場仲間やお客さまと接してコミュニケーション力を磨いてきました。その経験を今のコーディングにも活かしています。お相手とのイメージや意見のすれ違いを防ぎながら素早くスムーズなコミュニケーションを得意としています。お仕事を共にさせていただいた方たちからは「こちらが気づかなかったことに気づいてやってくれて助かります」「”よしなに”やってくださり助かりました」「返信が早くて助かりました。すぐ対応してくださりありがとうございました」「やりとりがスムーズでありがたいです」などなど、嬉しいお言葉をいただいております。もともとは、自分の手で作り上げていくことが好きで、コーディングもデザインを再現できることにワクワクして好きでやっています。デザイナーさんが考えに考えたデザインを文字（コード）を書いて、パッ！！！とWeb上に出てくるのが、面白いんです。楽しいんです。もちろん、なかなかデザイン通りに表現できないときもあります。そんなときは、とにかくもがいて、もがいて、もがいて調べまくるんですが、できたときの喜びたるや。。。爽

ラッパー等の空間の取り方で最近学んだことのご紹介です。サイト制作ではページ毎にコンテンツ幅が様々です。スペースを固定幅で指定していると、画面サイズの変化でズレが生じます。私がまさにそれで、無駄なスペーシングやその場しのぎのラッパーが増えたりしていました。参考としたサイトでは、 基準はヘッダーのLogoを基準(ピンク線)としてArticle部分を揃えたい、という内容。そこで以下を取り入れてレイアウトしていく。1.ビューポート単位2.calc（）関数 3.max（）比較関数 4.CSS変数上記を軸としてスペースを動的な値として指定してコンテンツを整列します。動的パディング=（ビューポート幅 - ラッパー幅）/ 2としてスペース幅の値を求めます。例❖Logo（ピンク線）にArticle部分を揃えるpadding-leftの値を取得したいビューポート：１３００ｐｘ ラッパー：１１００ｐｘ(内:水平方向のパディング、左右に各16px)上記からpadding-left=(1300px - 1100px) / 2 ⇓ビューポートを100vwに置き換えてpadding-left: calc((100vw - 1100px)  / 2)↓更に水平方向のパディング考慮する padding-left: calc((100vw - calc(1100px - 32px)) / 2)⇓⇓これで『ロゴ』(ピンク線)と『Article title』のアタマが揃いましたが、モバイルで『Article title』のパディングがゼロになりズレ発生。ここでmax()関数を用います。最小値を指定することでモバイル表

皆さんこんにちは。山本佑樹です。この度、各種サービスのサムネイルを変更しましたのでご報告させていただきます。変更前のサムネイルもシンプルで気に入ってたのですが、今回新たにサービスを追加することと、同業者からサムネイル背景が少し暗くて文字が見にくいとご指摘をいただきましたので一新することとしました。今回制作したサムネイルは知り合いであるデザイナーの方に制作いただきました。特に以下3点を意識して制作しました。・購入される方が一目で何のサービスなのかわかるようにする・暖色系を使用し、アクティブなイメージを持ってもらう・要素を入れすぎずに、シンプルな配置にする個人的には以前のサムネイルよりもさらによくなったのではないかと思っております。ご相談のみでもいつでも無料で承っておりますので、お気軽にご連絡ください。どうぞ宜しくお願い致します。山本佑樹

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

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

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

少々早いですが…年末のご挨拶をさせていただきます。2021年2月に登録したココナラですが、約10ヶ月経過していたとは、時の流れる早さに驚かされますね。沢山の方々の支えもあり、私早苗はここまで活動することができました。最高位プラチナランクを継続し、気持ちの良い状態で年越しを迎えられそうです。ご依頼いただくお仕事を通して、私は幾度となく成長してまいりました。今では提供できる価値に自信を持つことができます。また、本日も納品させていただいたクライアント様より、お礼のコメントをいただくことができました。大変嬉しく思います！まだまだ早苗のココナラは続いていきます。年末ギリギリまでご依頼を受け付けておりますので、どうぞお気軽にご相談くださいませ！皆さま、良いお年を。

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

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

＼conocoとは／フリーランスの女性によるWeb制作チームです。お客様の"想い”を第一にいただいたお仕事に丁寧に向き合いわくわくするWebサイトをつくっていきます。ここから１つずつカタチにしていきます。どうぞ、よろしくお願いいたします！.｡..｡.୨୧.｡..｡.୨୧.｡..｡.୨୧.｡..｡.୨୧.｡..｡.୨୧.｡..｡.　あなたの大切なサイト“この子”を作る　　　【 web studio conoco 】　Webサイトを我が子のように大切に　　　　丁寧に作り上げます。　☺︎ご依頼はプロフィールURLから☺︎.｡..｡.୨୧.｡..｡.୨୧.｡..｡.୨୧.｡..｡.୨୧.｡..｡.୨୧.｡..｡

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

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

例えば文章やコンテンツ毎のまとまりについてどのようなタグを使ってコンテンツを囲むか、コーディングの時にarticleタグを使うのか、sectionタグを使うのか迷うことがありました。どういった使い分けをしていくのか一度整理してみたいと思います。また、本来であればMDNをご確認いただくのがいいのでURLを載せたいのですが、こちらのブログではURLを載せることが出来ないので、割愛いたします。articleタグ文書やアプリケーションの中で自己完結しており、例えばブログ記事や商品カード、対話型のウィジェット、そのほか独立したコンテンツの項目が含まれるとのことです。文書の中に複数の記事を含めるような場合、例えばスクロールされるたびに各記事のテキストを次々と表示するようなブログであればarticleタグの中にsectionタグが含まれるような形式になるようです。sectionタグ文書の独立した一般的なセクション（区間）を表すようです。そのセクションを表現するより意味的に具体的な要素がない場合使用するとのことです。セクションというのが先に述べているように区間という意味のようですので、文書の区間を示す場合、他に何か適切なタグがない場合は使うような感じのようです。また、見出しが必要になるようです。使い分けとしてはarticleタグは独立したコンテンツとして配信しても意味が通じるものに対して使用。sectionタグは様々なタグの中で文書間の区間を示すために適切なタグがない場合使用sectionタグは汎用的に使えると考えていましたが、逆に適切なタグがない場合のみ使うような感じなので、使い方に気をつけ

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

Webサイトによってサイトデザインは様々ですが、header部分はある程度似通っている部分があると思います。そのため、案件を請け負った際に時間短縮をするためにheader部分においては、ある程度のテンプレートを作ってしまおうと思います。前回1パターン作っているので、今回は第2段です。こういった感じで、サイドバーとしてロゴやナビゲーションメニューがあるパターンです。サブメニューを開くとこういった感じでサイドバーの横に展開されるような感じにしています。タブレットのときは上部にロゴやナビメニューが移動するようになっています。サブメニューを開くとこういった感じで展開されます。これで案件時時間短縮につなかったと思います。ご依頼はこちらまでお願いいたします。

はじめまして。20年近くWeb制作している私が普段使いもできるPC作業の効率化をお伝えします。効率！効率！とか、という人は、そもそもめんどくさがりなんですかねぇ（笑）そんな人に特に読んで実践してほしいと思います。ちなみに、Macユーザー用になります。今回の効率化とは少ないタイピングで作業を完了させること。今回は、ブックマークのブラウジングを、キーボードだけで効率化します。ブラウジングも、Alfred（アルフレッド）Alfred（Mac用アプリ）言わずとしれた、Macの神アプリのAlfredです。インストールは、公式サイトからダウンロードできます。無料画像やアイコン、カラーサンプル、技術情報などのページを自分のブックマークに入れている方も多くいらっしゃると思いますが、私の場合は、このAlfredを使って、数タイプでそのブックマークを開けるようにしています。では、実際に、やってみましょう。widowsでは、「Wox」が代替ソフトのようです。１、Alfredの前設定・登録するための大きなカテゴリをイメージして決める。⇒これを入力するキーワードにします。　例）たとえば、Web制作をしている方でしたら、htmlやcss、imageやicon、colorなどの大きなキーワードがいいと思います。２、Alfredの設定【Feature：Web Search】・Alfredの設定画面を開きます。・[Feature]の[Web Search]を選びます。・右下にある[Add Custom Search]をクリックして設定画面を開きます。・自分の使っているブラウザを開き、自分の使っているブックマーク