すべてのカテゴリ

ご覧いただき誠にありがとうございます！ WEBデザイナーのはなと申します。 【プロフィール↓】https://coconala.com/users/1830480デザインをする上で大切にしている事の１つ。スマホでの見え方。(レスポンシブ)どの媒体でも言える事ですが、作業自体はPCでされる方が多いと思います。でもユーザーのほとんどはスマホで観覧している。昨日ココナラのカバー画像とTwitterのヘッダー画像を変更しました。前々から変えよう思ってはいたのですが、何となく後回しにしていました←はい。デザイナーとして失格ですね(;'∀')ではなぜ変更したか。Twitterのヘッダー画像で比較してみます↓以前のヘッダー画像です。スマホで見ると、この赤丸部分イラストに被っていて凄く気になるんですよね。ちなみに私はiPhoneユーザーなのでandroidだとまた少し違うかも？変更後のヘッダー画像がこちら↓イラストに何も被っていなくスッキリとした印象でごちゃごちゃしていた気持ち悪さが無くなりました！デザインを全体的に中央に寄せて若干、下目に配置しています。アイコンとも被らないように何度か調節しました。※画像が暗いのは許してください笑 目が痛くて暗くしてます(;'∀')どんなデザインの作業でも同じなのですが、PCで作成→スマホで確認→PCで修正→スマホで確認この作業を繰り返し、PCとスマホどちらも快適に見えるデザインを意識しています。これはTwitterのヘッダーだけでなくココナラのカバー画像や、サムネイルも同じです。被っていたり、見切れていたりする方意外と多いと思います。せっかく可愛いイラスト

電子書籍を自力でつくって、ビジネスに活かしたい！応援してます。あっこです。スマホでは、あなたの書籍が見えていないかもしれない。。というお話です。お役立ちいただけたら嬉しいです。ぶっちゃけ、嫌がらせの人かと思っていた。ｗ先日、突然、私のツイートに対して、こんなリツイートが。「あっこさんは、Kindle本、出版されているんですか？」フォロワーさんではなく、面識のない（？）方でしたが、出版していることを返信しました。そうしたら、「そうなんですね！　探しても見つからなかったですよ！！」こんなリツイートが送られてきました。正直、え？　何なん？　この人。。って、思いました。ｗそれまで、イイネもイイネされもない、全く知らない人からの突然のカラみだったこともあり、『本当は電子書籍を出版してないんじゃないの？』とでも、言いたいんだろうか？などと、今思えば大変失礼なことを思っていました。ｗこんな感じで、少しイラっとしてはいた（ｗ）ものの、「それか、、もしかして、ブログが変な風になっているのカモ？！」と、心配になって、すぐにブログを確認しました。異常ナーシ！　大丈夫だった。「何だ。見れるじゃん。良かった！」そこには、いつものブログと出版書籍があることが確認できました。何も問題なさそうで、安心しました。私は、ブログのサイドバーを、とても大切なエリアだと思っている派です。通常そのサイドバーに出版書籍も貼っています。そして、しばらくしてから、あることを思い出したんです。以前、いつもお世話になっている、信用できる大切な人に言われた言葉を。「ブログのサイドバーって、どこなの？　あっこはんの電子書籍は、とても見

こんにちは、Studio特化のLP制作専門デザイナーHirotoです。今日はミスドでハニーディップを食べながら作業しています。丸くてシンプルなのに人を惹きつけるドーナツって、実はLPと共通点があるなと思いながら食べています（笑）さて今日はLP制作の依頼から納品までの流れについて書いていきます。「LP制作を依頼したいけど流れがわからなくて不安」という方に向けて、私に依頼した場合の制作の流れを全部公開します。依頼前にこの記事を読んでおくことで、スムーズに制作を進めることができます。1.LP制作の流れが不透明で不安に感じている方へ「デザイナーに依頼したことがない」「途中で追加費用が発生しないか不安」「どのくらいの期間がかかるのかわからない」という声をよく聞きます。こういった不安のほとんどは、制作の流れが見えないことが原因です。この記事では依頼から納品までの流れを全部公開するので、安心して読み進めてください。2.依頼から納品までの流れSTEP1：お問い合わせ・ヒアリングまずはメッセージにてお気軽にご連絡ください。以下の内容をヒアリングさせていただきます。・サービス、商品の概要・ターゲット・競合他社・ご予算と納期・参考にしたいデザイン※ヒアリングはチャットまたはZOOMでのやり取りで進めますので、お気軽にご相談できます。STEP2：お見積もり・ご契約ヒアリング内容をもとにお見積もりをご提示します。内容にご納得いただけましたらご契約となります。料金は以下の通りです。────────────────────────・LP制作　¥30,000~（税込）※先着3名様限定・LP解析オプション　月額

「Studioって簡単って聞いたのに、なんだかうまくいかない…」「デザインが崩れちゃう」「どうしてこんな表示になるんだろう？」Webサイト作りをStudioで始めたばかりのあなたは、そんな風に感じていませんか？直感的に使えるはずなのに、なぜか思うようにいかないと、ちょっとがっかりしちゃいますよね。この記事では、Studio初心者がよくつまずく「ボックスの考え方」「レスポンシブデザイン」「CMSの使い方」など、具体的なポイントと、その解決策を分かりやすく解説していきます。一緒にStudioの「なるほど！」を見つけて、あなたのWebサイト作りをもっと楽しくしちゃいましょう！もし、「自分ではどうしても解決できない…」「時間がかかりすぎて進まない…」と感じている方は、無理せずプロに頼るのもひとつの手です。私自身、Studioでのサイト制作・修正を多数手がけており、「ちょっとしたお困りごと」から「全体の見直し」まで柔軟に対応しています。▼こちらでStudioの修正・更新サービスを出品していますので、ぜひお気軽にご相談ください！なぜかデザインが崩れる？「ボックス」の考え方Studioは「箱」を積み重ねてデザインするStudioでWebサイトを作る時、一番最初に「あれ？」と感じるのが、パーツを自由に置けないことかもしれません。PowerPointみたいに、好きな場所に文字や画像を置きたいのに、なぜか勝手に動いちゃう…そんな経験はありませんか？Studioは、すべての要素を「箱（ボックス）」として考えています。Webサイトは、実はたくさんの箱が積み重なってできています。大きな箱の中に小さな箱が

Webサイト制作では、画面サイズに応じて文字サイズを調整する「レスポンシブフォントサイズ」が重要です。スマートフォン・タブレット・PCなど、さまざまな画面幅でも読みやすさを保つためです。以前はメディアクエリを使って画面幅ごとにフォントサイズを変更する方法が主流でした。しかし現在は、CSSの clamp() 関数を使う方法が主流になっています。昔の方法：メディアクエリで切り替える以前は画面サイズごとにフォントサイズを指定する方法が一般的でした。今主流の方法：clamp()現在多くのサイトで使われているのが clamp() を使ったフォントサイズ指定です。font-size: clamp(18px, 2vw, 28px);clampは次の3つで構成されています。最小サイズ可変サイズ最大サイズつまりこの指定は最小：18px画面幅に応じて拡大（2vw）最大：28pxという意味になります。画面が小さいと18px、画面が広くなると徐々に大きくなり、最大で28pxまでしか大きくなりません。このようにメディアクエリを書かなくても自動でサイズが調整されます。デザイン基準から計算する書き方実務では、デザインカンプの幅を基準に計算する書き方もよく使われます。例えばデザイン幅：1440pxフォントサイズ：28pxの場合は次のように書きます。font-size: clamp(18px, calc(28 / 1440 * 100vw), 28px);これは1440pxの画面で28pxになるそれより小さい画面では比例して縮む最小は18pxという指定になります。なぜclampが主流になったのか理由はシンプルで

数あるブログの中からご覧いただきありがとうございます。webデザイナーの おやなぎまい です。今回は、ホームページを作るときに耳にする「レスポンシブ」について解説します！◆出品サービス◆「ホームページにお悩み」なら、当サービスをご利用ください！・Studioで作られているから更新がしやすい・初心者さんでも操作しやすい・「納品まで」ではなく「納品後も」フルサポートで安心↓こちらからお気軽にご相談ください！https://coconala.com/users/5131309--------------【購入者特典】1ヶ月の無料修正サポート＋運用をサポートするマニュアル付きレスポンシブデザインとは？レスポンシブデザインとは、パソコン、スマートフォン、タブレットなど、さまざまなデバイスの画面サイズに合わせてホームページのレイアウトを自動的に調整する設計手法のことです。これにより、どのデバイスからでも快適に閲覧できます。例えば、パソコンでは横長のレイアウト、スマートフォンでは縦長のレイアウトに切り替わることで、ユーザーが情報を見やすく、操作しやすくなります。レスポンシブデザインのメリット1. どんなデバイスでも見やすいパソコンだけでなく、スマートフォンやタブレットでもホームページがきれいに表示されます。例えば、スマホで見たときに文字が小さすぎたり、画像が画面からはみ出してしまうことがありません。これにより、どんなデバイスを使っている人でも快適にホームページを閲覧できます。2. お客様に優しいホームページになるマホで見たときにボタンが小さすぎたり、操作しにくいと感じたことはありませんか？レ

こんにちは!今回は、モバイルファーストデザインの重要性についてお話しします。スマートフォンでの使用を前提にした設計を取り入れることで、全体的なユーザー体験を向上させることができます。モバイルファーストとは、スマートフォンでの閲覧を最優先に考えたデザイン手法です。スマホでの利用が一般化している今、モバイルファーストでデザインすることが多くのメリットをもたらします1. シンプルで直感的なインターフェース    モバイルファーストで設計することで、シンプルで使いやすいインターフェースを作ることができます。限られた画面サイズを有効に使い、訪問者が迷わない設計を心がけましょう。 2. コンテンツの優先順位を明確にする    モバイルでは、すべての情報を一度に表示するのが難しいため、最も重要なコンテンツを優先的に表示する必要があります。優先順位を明確にし、重要な情報がすぐに目に入るように工夫しましょう。 3. SEOにも有利    Googleはモバイルファーストインデックスを導入しており、モバイル対応ができていないサイトはSEOで不利になる可能性があります。モバイルファーストのデザインを取り入れることで、検索順位の向上にもつながります。 次回は、ECサイトのデザインで重視すべきポイントについて解説します。売上につながるデザインのコツをお伝えしますので、ぜひご覧ください！現在、WordPressを使ったホームページ制作サービスを提供しています！ お気軽にお見積もりやご相談をください。

こんにちは、WEBデザイナーの内野です。今日は、スマートフォン対応（モバイルフレンドリー）のデザインを作る際に押さえておきたい基本ポイントについて解説します。PCだけでなく、スマホでの閲覧も意識したデザインが求められています。現代では、スマートフォンからのアクセスが多くを占めています。スマホ対応のデザインにするためのポイントを以下にまとめました。1. レスポンシブデザイン    画面サイズに応じてレイアウトが自動的に調整されるレスポンシブデザインは必須です。スマートフォン、タブレット、PCなど、どのデバイスからアクセスしても快適に見られるように設定しましょう。 2. タップ操作に配慮する    スマホでは、タップ操作がメインになります。ボタンやリンクのサイズを十分に大きくし、指で押しやすい設計にすることが重要です。また、リンク同士が近すぎると、間違ってクリックされる可能性があるので注意しましょう。3. 読み込み速度を改善する    スマートフォンはPCに比べて通信速度が遅いことが多いので、軽量なページを作ることが大切です。画像やスクリプトを最適化し、余計な要素を省くことで、読み込み速度を改善できます。 次回は、スマートフォン向けに「モバイルファースト」でデザインを進める方法について解説します。スマホを優先した設計を取り入れることで、さらに使いやすいサイト作りが可能になります。お楽しみに！現在WorldPressを使用したホームページ制作のサービスを提供しています。お気軽にお見積りやご相談ください！

ウェブサイトを作っていると、レスポンシブ対応というのは必須となってきますよね。今の時代、PCだけでなくスマホでサイトをチェックする方が多くなってきているので、どうしてもデバイスに合わせてデザインしていく必要があります。もちろん私もウェブサイトを作る時には、レスポンシブ対応は必須で取り組んでいますが、やはりデバイス様たちがどんどん進化されているので、どうしても作成前にブレイクポイントをいくつにするか、何個作るかはチェックするようにしています。あまり無いですけど、時々ブレイクポイントを4つくらい作っているサイトを見つけることがあって、すごいわーと思ってしまいます。なぜなら、ブレイクポイントを多く作れば、その分、用意する画像が増えたり、サイズの設定をする必要ができてしまうからです。デバイスに合わせて見やすく設計するのは良いことだと思うのですが、その分画像が増えるとサイトが重くなってしまいます。そうなると、どうしてもSEO的には好ましくないサイトになってしまうんですよね。私も先ほど、いろいろ調べていて、気になるサイトを開こうとしましたが、中々開けないので、思わずサイトを閉じてしまいました。そんなものですよね。みんな「せっかち」なんですよwWordPressにはもちろん画像のサイズを一括でリサイズしてくれるプラグインがあるので便利ですけど、やはり画像の数が多いと何かあった時の修正で時間が取られてしまうわけです。あるサイトで、大手のweb制作会社20社のブレイクポイントを調べていて、そうしたら、768pxの一つだけという所がほとんどだったそうです。「納得するわー。」ということで私も、768

「パソコンでは綺麗に見えるのに、スマホだとなんか見づらい」そんな状態のホームページ、実はとても多いです。 そして今、ホームページのアクセスの約7割はスマホからと言われています。 つまり、スマホで見づらいだけで多くの人を逃している可能性があります。 ■ スマホ表示が微妙だと起こること スマホで見づらいホームページは、こんな状態になりがちです。 ・文字が小さくて読みにくい ・ボタンが押しづらい ・レイアウトが崩れている ・スクロールしにくい このような状態だと、ユーザーはすぐにページを離れてしまいます。 「なんか見づらいな」と感じた瞬間に離脱されてしまうのが現実です。 ■ なぜスマホ対応が重要なのか？ 今はほとんどの方がスマホで情報を探しています。 ・外出先で検索 ・SNSからの流入 ・気になった時にすぐチェック このような行動が当たり前になっているため、 スマホでの見やすさはとても重要です。 ■ よくある改善ポイントスマホ表示は、少し調整するだけでも大きく変わります。 ・文字サイズを大きくする ・余白をしっかり取る ・ボタンを押しやすくする ・レイアウトをシンプルにする 「ちょっとした違和感」を整えるだけで、 見やすさ・使いやすさがぐっと良くなります。 ■ まとめホームページは「見てもらうこと」がスタートです。スマホで見づらい状態だと、それだけで大きな機会損失になります。 「最近反応が少ないな…」と感じている方は、 一度スマホ表示を見直してみるのがおすすめです。 ■ 修正について「どこを直せばいいか分からない」 「自分で調整するのが難しい」 そんな方に向けて、スマホ表示の修正・改

今日はポートフォリオの細かい修正をしていました。大きなデザイン変更ではなく、リンクの修正や表示確認など、一見すると地味な作業です。実際にURLをクリックしたときに正しく飛ぶかどうか、スマホでも見やすいかどうか、表示が崩れていないかどうか。当たり前のようで、実はとても大事なこと。制作って、華やかなトップページよりもこういう積み重ねのほうが多いです。でも私は、この作業が結構好きです。少しずつ整っていく感じが、なんだか安心するんです。今日も一歩前進。明日はまた違う部分を整えていこうと思います。

はじめに近年、AIを活用したビジネスやコンサルティングが注目を集めています。そのため、「ノーコードを活用して最速でLPを作る」→「ABテストを行う」このサイクルがより加速化してきたように感じます。特に、Studioを使ってホームページを制作したけど、レスポンシブ対応に苦労している事業主の方々に向けて、ココナラを活用した修正方法とメンターのサポートを提案するためにブログを書きます。修正案件のチェックポイント5選！タグSEO対策として、適切なmetaタグや見出しタグの設定は必須です。全ての要素をデフォルトで設定されているタグにするのは検索エンジンに正しい情報を伝えられないので、サイトの評価が上がりにくくなります。レイヤーレイヤーを整理することもSEO対策の一環です。「全てdiv」ではなく- - - - 「内容ごとにsection」「見出しタグ」「並列タグ」「header, main, footer」- - - - のようにサイトを構造化して、意味のまとまりでタグをつけましょう。画像のAlt（代替テキスト）画像のAltは見落としがちですが、必要なものには記入します。「具体的かつ簡潔に」「周囲のコンテンツと関連性を持たせる」ことでSEOに影響が出てきますし、視覚障害者向けのアクセシビリティが向上します。サイトの説明文とタイトルサイトのタイトルや説明文は、ユーザーが「この記事読んでみたい！」という希望に対して 影響力があります。明確で魅力的な内容にして、クリック率を向上させましょう。タイトルと説明文は「ページごとに変える」ことで、ページ毎のメイントピックを検索エンジンとユーザに伝えること

マップは、スマホ対応のレスポンシブデザインです。サイズ、初期の縮尺設定は自由に変更できます。Googleマップは、Googleが提供している地図情報提供サービスの名称で無料で使用できます。＜サービス紹介＞ 下記のお悩みを解決します ● お客様が店舗を見つけられない ● 地図を使った案内が便利でない ● スマートフォンでのアクセスが悪い ● 来店を促す手段が不足している ＜サービスの特徴＞ ● 会社や店舗のホームページにグーグルマップを表示します ● スマホ対応の地図を無料で提供し、便利に利用していただけます ● グーグルマップを通じて、会社の場所やお店への来店を促します ● 簡単な操作で、すぐにお客様にアプローチできます ● 会社や店舗のホームページにGoogleマップを表示できるように「コード」を提供いたします。＜有料オプション＞ 有料オプションで複数の場所を表示出来ます。例えば、会社（店舗）と最寄り駅、さらに移動ルートが地図上に表示可能です。写真や説明文、URLを追加で入れる事も出来ます。複数表示の場合は、「地図データ」の提供になります。＜サービスの流れ＞ step1 依頼内容のご確認 step2 ホームページに必要な情報（住所か座標）のご提供 step3 グーグルマップの設定・表示 step4 完成したホームページの確認  

レスポンシブデザインは、スマホやタブレットなど、どんなデバイスでも見やすいホームページを作るための方法です。これから、レスポンシブデザインの重要性とそのノウハウを紹介します。レスポンシブデザインとは？レスポンシブデザインとは、画面サイズに応じてホームページのレイアウトやデザインが変わる技術です。例えば、スマホで見たときとパソコンで見たときでは、画面の大きさが違います。スマートフォン、タブレット、ノートパソコン、デスクトップなど、さまざまなデバイスでウェブページを快適に閲覧できるようにすることを目的としているんですね。レスポンシブデザインを使うことで、どんなサイズの画面でも見やすいレイアウトに自動的に調整されます。レスポンシブデザインのメリットレスポンシブデザインには多くのメリットがあります。まず、ユーザー体験の向上です。どのデバイスでも見やすく操作しやすいため、ユーザーはストレスなくホームページを利用できます。次に、管理の手間が減ることです。以前は、スマホ用とパソコン用で別々のホームページを作る必要がありましたが、レスポンシブデザインなら一つのホームページで済みます。さらに、SEO対策にも効果的です。Googleはモバイルフレンドリーなサイトを評価するため、検索順位が向上する可能性があります。レスポンシブデザインを導入する方法レスポンシブデザインを導入するための基本的なステップを紹介します。まず、HTMLとCSSを使ってレイアウトを作成します。次に、メディアクエリを使用して、画面サイズに応じたスタイルを設定します。ココナラブログでは、コードが禁止ワードとして設定されているため、

はじめて独自ドメインを取得してからカレコレ25年、インターネット通販の黎明期からこの業界にいます。楽天市場がコミコミ5万円ポッキリで出店できたころ、独自ドメインで通販サイトのオーナーになるのがブームでした。この四半世紀でブラウザとモバイル環境が大きく進化、Shopify が登場したことで企業の規模に関係なくだれでもキレイで使いやすいレスポンシブな通販サイトを運営することができるようになりました。しかし、折角スバラシイ商品を持ってるのに、10年以上も変わらないデザインの通販サイトがあるのも事実。iPhone でみると、文字が小さすぎて読めません。正気ですか？今はモバイルが過半数ですよ、非常にモッタイナイです。この機会に再構築を検討しましょう。

今はモバイルフレンドリー・モバイルファーストの時代です！【要は】スマホやタブレットを重視しますよってことですね理由は・検索件数がすでにPCよりモバイル（スマホ等）のほうが多い！・その傾向は続きそうで検索エンジン側もそれに移行している。ユーザーのことを考えるならばPC用サイトだけでは見にくいのでやはりモバイル対応は外せません！①元のサイトとは別にモバイル用のサイトをつくる【別サイト構築・非推奨】特に理由がなければ避けた方がよい方法です。PC用とモバイル用の２つのURLをつくることになりますが、ユーザーを２つの場所にバラバラに集めることと同じです。１か所に集めた方がアクセス数が伸びるのでSEOとしては効果が上がります。②プログラムを使ってサイト内容をユーザーに合わせて変化させる【動的生成】有名な例はWordPressです。同一のURLでアクセスしたユーザーに合わせてバックグラウンドで表示内容自体を変化させます。メリットは・１つのURLだからアクセスがばらけない・それぞれのユーザーに合わせた対応ができるデメリットは・バックグラウンド（サーバー）との相談が生じるので重くなりやすいこれは目的に合わせて選ぶべき選択肢です。こちらから伝えたいことを重視するならば内容を変化させる必要がないので不向き。ですが、ユーザーに合わせたおすすめなどをしたいならば有効な選択肢になります。③レスポンシブ対応にする【レスポンシブ・推奨】こちらからの情報発信に重きをおくのであれば推奨！メリット・１つのURLだからアクセスがばらけない・画面サイズにあわせて表示を変えるだけなので軽い！デメリット・ユーザーに合わせた

「パソコンではきれいに見えているから大丈夫」 こう思って公開したホームページ。 でも実際には、ここに大きな落とし穴があります。 今の時代、ホームページを見る人の多くは スマホからアクセスしています。 ここを軽く見てしまうと、 大きな機会損失につながります。 ■ 失敗① スマホで文字が小さいよくあるのが、 ・文字が小さすぎる ・拡大しないと読めない ・行間が詰まりすぎ この状態です。 スマホのユーザーは、 「読みにくい」と感じた瞬間に離脱します。 ■ 失敗② レイアウトが崩れているパソコンでは問題なくても、 スマホでは次のようなことが起きます。 ・横にはみ出している ・ボタンが押しにくい ・画像が大きすぎる これだけで、 サイトの印象は大きく下がります。 ■ 失敗③ 問い合わせにつながらないスマホで見づらいサイトは、 ・途中で閉じられる ・最後まで読まれない ・問い合わせボタンが押されない という流れになりやすいです。 どれだけ内容が良くても、 見づらければ意味がありません。 ■ 今は「スマホ前提」で作る時代昔はパソコン中心でしたが、 今は完全に流れが変わっています。 成功しやすいホームページは、 ✔ スマホでも読みやすい ✔ ボタンが押しやすい ✔ レイアウトが崩れない ここを最初から意識しています。 ■ 公開前のチェックがとても大切ホームページを公開する前に、 必ずスマホで確認することが重要です。 ・実機で見る ・スクロールして読む ・ボタンを押してみる この一手間で、 失敗はかなり防げます。 ■ 最後にもし、 ・スマホ表示に不安がある ・見づらいと言われたことがある ・最初

こんばんは！今日も初心者さん向けSTUDIO簡単操作の記事を執筆していきます♪STUDIOを知らない方へ・・・。WordPressでなくても十分ホームページを作れるので、STUDIOは是非チェックしてみてくださいね！Studioは、PCで作ったデザインを自動でスマホやタブレットにも対応してくれる便利なツールです。ただし「完全におまかせ」だと、少し見づらくなることもあります。特にチェックしてほしいのはこの3つです。① デバイスごとの表示確認PCだけでなく、タブレット・スマホ表示も必ず切り替えて確認しましょう。スマホでは文字が大きすぎたり、余白が詰まることがあります。② スマホ用に微調整スマホでは・文字サイズを少し小さく・余白を広めにこれだけでも、かなり見やすくなります。③ 必要ない要素は非表示にPCでは必要でも、スマホでは不要な装飾は「スマホでは非表示」にするのもおすすめです。Studioは簡単そうに見えて、このひと手間で完成度がぐっと上がります。レスポンシブで迷ったら、「まずスマホで見やすいか？」を基準にしてみてくださいね☺️・・・もし、レスポンシブでお困りでしたら遠慮なくＤＭをお待ちしております♪

こんにちは！不定期で皆様悩みがちのSTUDIOにかんするあれこれをブログ掲載していこうと思います（＾＾）ｖ初日は「BOX」についてです↓STUDIOではBOXの「縦はAUTO」がやさしくておすすめ♪STUDIOでサイトを作っていると、「BOXの高さってどう設定すればいいの？」と迷うこと、ありますよね。そんなときに覚えておきたいのが、BOXの縦幅（高さ）はAUTOにするのが基本という考え方です♪縦幅をAUTOにするといい理由縦幅を数値で固定してしまうと、あとから文章を少し変えただけで文字がはみ出したり、逆にスカスカになったりします…。そのたびに高さを調整するのは、ちょっと大変ですよね。AUTOにしておけば、中のテキスト量に合わせてBOXが自然に広がってくれるので、更新もラクラクです♪レスポンシブにもやさしい♪STUDIOはスマホやタブレット表示もとても大切。画面サイズが変わると、文字の大きさや改行位置も変わります。縦AUTOなら、どのデバイスでも無理のない高さになってくれるので、レイアウト崩れを防ぎやすくなります♪固定してもOKな場面もありますもちろん、ヒーローエリアなど「この高さで見せたい！」という場所では、固定するのもアリです♪ ただ、文章がメインのセクションでは、基本はAUTOにしておくと安心ですよ。まとめ♪STUDIOでは「横はデザインで調整、縦はAUTOにおまかせ」がやさしい作り方です。最初からこの考え方で進めると、あとあと困りにくくなります♪

結論からいうと、WordPressでスマホ表示が崩れる一番多い原因は「テーマやプラグインの不具合」「CSSの設定ミス」「画像やテーブルの幅が合っていないこと」です。なぜなら、WordPressはパソコンとスマホで自動的に画面幅に合わせて調整するレスポンシブデザインを採用していますが、その仕組みを壊す要素が入ると正しく表示できなくなるからです。特に市川市や行徳などでお店のホームページを運営している小規模店舗では、集客の多くがスマホ経由になるため注意が必要です。スマホ表示が崩れる主な原因テーマの仕様や不具合無料テーマや古いテーマはレスポンシブ対応が不十分な場合があります。更新が止まっているテーマは要注意です。プラグインの競合ギャラリーやスライダー系のプラグインがテーマと干渉してスマホ表示を乱すことがあります。CSSのカスタマイズミス固定幅のコード（例：width:1200px;）を追加してしまうと、スマホ画面に収まりません。画像サイズの指定ミス横幅が大きい画像を固定幅で表示すると、横スクロールが出て見づらくなります。テーブルや表の非対応メニュー表や料金表をそのまま入れると、スマホでは画面に収まりきらず横にはみ出してしまいます。よくある崩れ方と解決方法（一覧表）崩れ方の症状 原因 解決方法画像が画面からはみ出す 画像サイズが固定されている CSSでmax-width:100%を設定文字が重なる 行間や余白のCSSが不適切 フォントサイズやline-heightを調整横スクロールが出る 固定幅の要素（画像・テーブル・iframe） width:100%を指定、または横スクロール許可メニ

ホームページを作るとき、ユーザーが使いやすいと感じることがとても大切です。この使いやすさを「ユーザーエクスペリエンス（UX）」と言います。今回は、ホームページのUXを向上させる方法を紹介します。ナビゲーションを簡単にするナビゲーションとは、ホームページの中でページを移動する方法のことです。これがわかりにくいと、ユーザーは迷ってしまいます。例えば、リンクの文字が小さすぎたり、メニューが多すぎたりするのは良くありません。シンプルでわかりやすいメニューを作ることが大切です。目立つ場所にメインメニューを配置し、ページ内の移動がスムーズに行えるようにしましょう。また、ユーザーがどこにいるかを示す「パンくずリスト」を設置するのも効果的です。読みやすいデザインを採用するデザインが見やすいと、ユーザーはストレスなくホームページを利用できます。まず、文字の大きさや色に気を付けましょう。小さすぎる文字や、背景と同じような色の文字は避けるべきです。また、段落や見出しを使って、情報を整理することも重要です。さらに、余白をうまく使うことで、ページ全体が見やすくなります。有名ブロガーのブログ記事などは、かなり余白が使われているように感じます。画像や動画も適度に取り入れて、視覚的にわかりやすくしましょう。ページの読み込み速度を速くするホームページが表示されるまでに時間がかかると、ユーザーはすぐに離れてしまいます。ページの読み込み速度を速くするためには、画像や動画のサイズを小さくすることが効果的です。拡張子はJPEGやPNGではなく、積極的にWeppを使いましょう。また、不要なプラグインやスクリプトを削除する

「パソコンでは問題ないけど、 スマホで見ると、なんだか見づらい…」 こんなホームページ、実はとても多いです。 今は、 ホームページを見る人の多くがスマホです。 スマホで見づらいだけで、 そのまま閉じられてしまうことも珍しくありません。■ スマホで見づらくなる一番の理由 一番多い理由は、 パソコンだけを見て作っていることです。 作っている本人は、 ✔ 大きな画面 ✔ マウス操作 ✔ 見慣れた画面 で確認しています。 でも、見る人は、 ✔ 小さな画面 ✔ 指で操作 ✔ 初めて見る この違いが、見づらさにつながります。 ■ 文字が多すぎると読まれない スマホでは、 長い文章はとても読みにくいです。 パソコンでは普通に見える文字量でも、 スマホだと、 ✔ 文字がぎっしり ✔ スクロールが大変 という印象になります。 ポイントは、 ✔ 1文を短くする ✔ 行を分ける ✔ 大事なところだけ残す これだけでも、かなり読みやすくなります。 ■ ボタンやリンクが押しにくい スマホでよくあるのが、 ✔ ボタンが小さい ✔ リンクが文字だけ ✔ どこを押せばいいか分からない という状態です。 スマホは指で操作します。 押しやすさはとても大切です。 ■ 横に動かさないと見えないのは要注意 スマホで見たときに、 ✔ 横に動かさないと見えない ✔ 表や画像がはみ出している こうなっていたら、 それだけでストレスになります。 この状態だと、 内容を読む前に離れられることも多いです。 ■ スマホ対応は「完ぺき」でなくていい スマホ対応と聞くと、 むずかしく感じる人もいます。 でも、 最初から完ぺきを目指す必要

「STUDIOでホームページを作ってみたいけど、レスポンシブ対応って難しそう…」そんな不安を感じている方も多いのではないでしょうか。結論から言うと、STUDIOは初心者でもレスポンシブ対応しやすいツールです。ただし、いくつか“つまずきやすいポイント”があります。今回は、STUDIO初心者さん向けにレスポンシブ対応の基本と注意点をわかりやすくまとめます。そもそもレスポンシブ対応とは？レスポンシブ対応とは、スマホ・タブレット・パソコンなど、画面サイズに合わせて表示が最適化されることです。今はホームページを見る人の多くがスマホユーザー。レスポンシブ対応ができていないと、・文字が小さくて読めない・レイアウトが崩れる・ボタンが押しづらいといった印象を与えてしまいます。つまり、レスポンシブ対応＝信頼感に直結するポイントなのです。STUDIOはレスポンシブ対応しやすい？はい、しやすいです。STUDIOには・PC・タブレット・スマホそれぞれの表示を切り替えて編集できる機能があります。そのため、「スマホだけ文字サイズを変える」「スマホでは縦並びにする」といった調整も可能です。WordPressと比べると、専門知識なしでも直感的に操作できるのが大きなメリットです。初心者さんがつまずきやすいポイントSTUDIOは便利ですが、初心者さんがよく悩むポイントもあります。・PCで作ったまま、スマホ表示を確認していない・文字サイズや余白がスマホでは大きすぎる／小さすぎる・横並びのデザインがスマホで崩れる「PCではきれいなのに、スマホだと見づらい…」という状態は意外と多いです。失敗しないためのコツ初心者さんにお

結論から言うと、LP（ランディングページ）はスマホサイズだけでなく、パソコンサイズも作った方がいいです。理由はいくつかありますが、「ユーザー層」「表示の最適化」「信頼性」という3つの観点で見ていくと分かりやすいです。1. ユーザーの閲覧環境はスマホだけではない確かに、現在の日本ではLP閲覧の7〜8割がスマホからというデータもあります。しかし、業種やターゲットによってはPC閲覧の割合も無視できません。たとえば以下のようなケースではPCからのアクセスが多くなります。BtoB（企業向け）サービスや採用ページ高価格帯の商材（外壁塗装・リフォーム・機械設備など）仕事中やオフィスで検索するユーザー層スマホだけを前提に作ると、PC表示でレイアウトが崩れたり、余白や文字サイズが不自然に見えたりして、見込み客の離脱につながることもあります。2. 画面幅に合わせたデザインは印象を左右するLPの目的は「問い合わせ」や「購入」など、明確なアクションを促すこと。そのためには、見やすく、信頼感のある見た目が欠かせません。PCサイズでは横幅が広くなる分、写真を大きく見せられるコンテンツを左右2カラムで整理できる「余白」を使って上品な印象を出せるなど、スマホでは表現しきれないデザインが可能になります。逆にスマホ版だけを拡大表示すると、全体が間延びしてスカスカに見えることもあります。3. “スマホ優先設計”と“PC最適化”は別物最近では「モバイルファースト」が主流で、スマホ版を中心に考えるのは正解です。ただし、「スマホだけ作る」こととは違います。正しい順番は、スマホで見やすく設計するその後、PC表示時に崩れない

レスポンシブデザインとは、スマホ・タブレット・PCなど、画面サイズの異なるデバイスでも快適に閲覧できるようにレイアウトを自動で調整する仕組みのことです。その際に基準となるのが「ブレークポイント」と呼ばれるpx（ピクセル）単位の区切りです。一般的には、デバイスの画面幅によっていくつかの区分が設けられています。スマホは横幅が狭く、タブレットやPCになるほど広くなるため、その幅に合わせてCSSでスタイルを切り替えることで、どの画面でもバランスよく表示されるようにします。近年のWeb制作では、スマホから順にデザインを組み立てていく「モバイルファースト」の考え方が主流になっています。これは、最も小さい画面サイズ（主にスマホ）を基準にデザインし、画面が広くなるにつれて余白やカラム構成を変えていくという考え方です。スマホの一般的な幅はおよそ375px前後で、最小では320px程度を想定しておくと安心です。タブレットは768px前後、PCは1024px以上を基準にすることが多いです。これらの数値はあくまで目安であり、実際にはサイトの内容やユーザー層に合わせて柔軟に調整します。つまり、レスポンシブのpxの基準とは「どのデバイス幅でデザインを切り替えるか」を決めるための指標です。これを明確にしておくことで、デザイン崩れを防ぎ、どんなデバイスでも見やすいサイトを構築できます。

画像を用意しなくても、CSSだけで水玉模様やチェック柄が作れます。いつものようにコピペ用のコードも載せておきますので、よかったら使ってみてください。そして最後には、この背景を使っての活用例もお伝えしますので、参考にしてみてくださいね🌷▼このブログの完成見本https://　tsuyu0102.github.io/css-sample/background-pattern/index.html完成見本1️⃣html1️⃣<section class="sample01"></section>⭐️sectionタグはdivとかでもいいです👍　<div class="sample01"></div>としてもOK。そしてこのタグの間に、表示したいものを入れます。この背景を使った活用方法はページ下部へ👇CSS1️⃣.sample01 {    height: 300px;    background-color: #f7e3da;    background-image: repeating-linear-gradient(-45deg, transparent 0 15px, #badfd7 15px 30px, #fdb7b9 30px 45px);   }⭐️高さはheightのところで調整してください。htmlのsectionタグの中に何か書けば、CSSのこの1行書かなくてもOK。完成見本2️⃣html2️⃣<section class="sample02"></section>CSS2️⃣.sample02

デザインにおけるロゴの問題 デザイナーの仕事でSNSのアイコンやホームページでお客様の会社やお店のロゴを使う際、「看板では目立つのにスマートフォンでは小さくなって目立たない」「縦長のスペースに横長のロゴを入れると収まりが悪い」と感じて困ることがよくあります。 これまで看板や紙面では大きくはっきり表示できていたロゴもスマートフォンのアプリアイコンのような小さなスペースで使用することを想定されておらず、こうした問題の原因になっています。 しかし従来ロゴは様々な場所で目に触れて覚えてもらえるようにその形やデザインは決して変えないことが常識でした。 レスポンシブロゴの普及 こうした問題から、限られたスペースでもわかりやすくロゴを表示できるようにロゴを変形（レスポンシブ）できるが求められ、最近採用様々な企業やお店でみられるようになりました。 おなじみの企業はすでにレスポンシブロゴを採用しています。(引用: responsivelogos.co.uk) これからロゴを依頼する方に バイトデザインのロゴ制作はこのレスポンシブロゴに対応しています。 具体的には ・ロゴマークと企業、店名を横長にデザインしたロゴ（看板など大きなスペース向け） ・ロゴマークと企業、店名をやや正方形に近くデザインしたロゴ（汎用向け） ・ロゴマークのみ（アプリアイコンやfaviconなどのWeb向け） この3種類を基本にセットで制作し、様々な場面で利用しやすいようにデザインします。 またバイトデザインはホームページ制作も行っており、スマートフォンに対応するレスポンシブデザインに慣れているのでSNSやホームページでの集客

auto-fit（auto-fill）とminmaxを使ってレイアウトすれば、簡単にレスポンシブなレイアウトに！今回もコピペで使えるコード付き！一緒にやって行きましょう🎵完成見本https://　tsuyu0102.github.io/css-sample/grid-auto-fit/index.html▼1500px幅▼768px幅▼320px幅▼ホバーはこのようにしてみましたhtml<section class="item-section">   <h2>NEW ITEMS</h2>   <div>    <a href="#"><img src="img/item01.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item02.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item03.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">

ホームページを作成するときは、スマホ版から作成すべきか。これはWeb制作に関わる人なら一度は悩むテーマだと思います。結論から言うと、多くの場合「スマホ版から作成する」考え方はとても合理的です。ただし、すべてのケースで絶対に正解というわけでもありません。この記事では、その理由と注意点を整理します。スマホ版から作成すべきと言われる理由現在、ホームページの閲覧はスマートフォンが中心になっています。業種やターゲットにもよりますが、アクセスの6〜8割以上がスマホというケースは珍しくありません。つまり「一番多くの人が見る画面」がスマホである以上、そこを最優先で設計するのは自然な流れです。また、スマホは画面が小さい分、情報量に強い制限があります。限られたスペースの中で「本当に必要な情報は何か」「どの順番で見せるべきか」を考えることになり、結果として構成がシンプルになります。この整理された構成は、後からPC版を作る際にも非常に役立ちます。スマホファーストで得られる設計上のメリットスマホ版から作ると、ユーザー導線が明確になりやすいという利点があります。ボタンの配置、文字サイズ、タップしやすさなど、ユーザー体験を意識した設計になりやすく、結果的に「使いやすいサイト」になりやすいです。さらに、検索エンジンの評価という点でも、スマホを意識した設計は重要です。現在はスマホ版の表示を基準に評価される仕組みが主流のため、最初からスマホを軸に考えることで、後戻りの修正が減ります。スマホ版から作らない方がよいケースもある一方で、必ずしもスマホ版から作るのが最適でない場合もあります。例えば、業務システム系のサイト

STUDIOは初心者さんでも扱いやすい反面、レスポンシブだけは「思ったより難しい…」と感じやすい部分でもあります。実際、よくご相談いただくのは次のようなケースです。① スマホだけレイアウトが崩れる「PCではきれいなのに、スマホで見ると文字や画像がズレている…」これはBOXの重なり横並び要素固定幅の設定などが原因になっていることがほとんど。STUDIOは自由度が高い分、気づかないうちにスマホ表示に負担をかけていることがよくあります。② 文字が小さくて読みにくい初心者さんが特に見落としがちなのがデバイスごとの文字サイズ調整。「PC基準で作って、そのままスマホも同じ設定」になっていると、読みにくいなんとなく安っぽく見える離脱されやすいという状態に…。③ どこを直せばいいのかわからなくなるレスポンシブ対応で一番つらいのがこれです。「ここを直したら、　別のところが崩れた…」「何が原因なのか、もうわからない…」この状態になると、時間だけがどんどん溶けてしまいます。実は「修正だけ」頼みたい方もとても多いですSTUDIOのご相談で多いのが、サイト自体はもう完成している大きく作り直すほどではないでもスマホ表示が気になるというケース。「最初から作り直すほどじゃないけど、　このまま公開するのはちょっと不安…」そんな時に、レスポンシブ修正だけプロに任せるという選択もあります。STUDIOレスポンシブ修正サービスについて私のサービスでは、スマホ・タブレット表示の崩れ修正文字サイズ・余白の最適化初心者さんが触っても崩れにくい構成への調整などを中心に、「今あるサイトを活かしながら」整える修正を行っています。

「STUDIOは初心者向けって聞いたけど、実際に触ってみると意外と分からない…」そんな声、実はとても多いです。今回はSTUDIO初心者さんがよくつまずくポイントと、簡単な対処法をまとめました。① 何から作ればいいか分からないいきなりデザインから考えようとすると、ほぼ確実に止まります。まずはトップサービス内容お問い合わせこの最低3ページだけを作る意識でOKです。② レイアウトがぐちゃっとするSTUDIOは自由度が高い分、配置が崩れやすいです。初心者さんは「コンテナ」「グリッド」を使うこれだけで一気に整います。③ スマホ表示がうまくいかないPCでキレイでも、スマホで見ると崩れる…これはあるある。STUDIOはレスポンシブを個別調整できるので、「スマホ表示も必ず確認」するのがポイントです。④ デザインに正解が分からないおしゃれにしようとしすぎなくて大丈夫です。初心者さんほど色は2〜3色までフォントは2種類までこのルールを守るだけで、十分「ちゃんとしたサイト」になります。⑤ 結局、時間がかかってしまうSTUDIOは簡単とはいえ、・調べる・試す・直すを繰り返すと、想像以上に時間がかかります。「本業に集中したい」「早く公開したい」そんな方は、プロに任せるのも一つの選択です。まとめ｜STUDIOは初心者向け。でも不安があって当たり前STUDIOは確かに初心者向けのツールですが、最初につまずくポイントを知っているかどうかで、難易度は大きく変わります。もし何が正解か分からない途中で止まってしまったとにかく早く形にしたいそんな場合は、STUDIOのホームページ制作・修正をまるっとお任せすることも可

【Studio】でホームページ制作中・・・複数あるリストの高さが揃わないことありますよね！そんな時、使える裏技があります！！（↓以下、実例）①頑張って『リスト』を作った！②よく見ると、３番目のアイテムのテキスト量が多いから、　高さが合ってない・・・③そんな時は・・・　Ⅰ.親要素の上下両端揃え（縦真ん中2本）の中央寄せ　Ⅱ.子要素の縦幅auto④高さが揃う！コンテンツが多くなったり、レスポンシブを考慮すると、一回一回高さを合わせるのは大変ですよねそんな時に設定しておくと便利な裏技でした！

よくある問題：レスポンシブ時に要素が見切れたり、はみ出たり、不要な余白ができる対処法：ボックスを内包する親ボックスの縦幅は、固定値「px」ではなく、「auto」にする※autoについて「auto」は子ボックスを持つ親ボックスに設定できる単位です。「auto」に設定したボックスは、その中に存在するボックスと同じ縦幅 / 横幅になります。内包する子ボックスのサイズに合わせて可変するため、さまざまな画面サイズに対応でき、レスポンシブなレイアウトを作成するのに役立ちます。

数あるブログの中からご覧いただきありがとうございます。webデザイナーの おやなぎまい です。今回はスマホやタブレットをレスポンシブ対応にしたいけれど、「なぜだかわからないけれど、上手くいかない」そんなあなたに、レスポンシブでつまづきやすいポイントとその解決方法についてわかりやすく解説します！前回ご紹介した「レスポンシブデザインとそのメリットとは？」について詳しく知りたい方はこちらの記事をご覧ください！◆出品サービス◆「ホームページにお悩み」なら、当サービスをご利用ください！・Studioで作られているから更新がしやすい・初心者さんでも操作しやすい・「納品まで」ではなく「納品後も」フルサポートで安心↓こちらからお気軽にご相談ください！https://coconala.com/users/5131309--------------【購入者特典】1ヶ月の無料修正サポート＋運用をサポートするマニュアル付き初心者がつまずきやすいポイント「Studio」を使ってレスポンシブ対応できるのはいいけれど、設定をする際、特にスマートフォンのレイアウト調整は初心者にとって難しいと感じる方が多いとされています。例えば...1. 文字や画像が小さくなりすぎるスマホ画面では、文字や画像のサイズを適切に調整しないと、見づらくなることがあります。2. 要素の配置が崩れるパソコン用に作ったデザインがスマホでは崩れてしまうことが多いです。3. 操作性の問題ボタンが小さすぎたり、タップしづらい配置になってしまうことがあります。解決方法｜レスポンシブ対応はプロに依頼してしまいましょう！ご自身でやるのが難しい、手間だ

ウェブデザインにおいて、レスポンシブデザインはますます重要性を増しています。ユーザーは様々なデバイスや画面サイズでウェブサイトにアクセスするため、その体験を最適化することが不可欠です。ここでは、レスポンシブデザインの重要性と実践方法について解説します。1.レスポンシブデザインの重要性モバイルファーストの時代: スマートフォンやタブレットからのウェブ閲覧が増加しており、モバイルユーザーに対する最適な体験を提供することが必須となっています。2.SEOの観点から: Googleなどの検索エンジンは、モバイルフレンドリーなウェブサイトを優先的に表示する傾向があり、レスポンシブデザインはSEOにも重要な要素です。ユーザーエクスペリエンスの向上: ユーザーが快適にウェブサイトを閲覧し、目的を達成できるようにするためには、デバイスに応じた最適な表示が不可欠です。3.レスポンシブデザインの実践方法メディアクエリの活用: CSSのメディアクエリを使用して、異なるデバイスや画面サイズに対応したスタイルシートを適用します。フレキシブルなレイアウト: グリッドシステムやフレキシブルなコンポーネントを使用して、コンテンツが異なる画面サイズに適応するようにします。イメージの最適化: 画像のサイズや解像度を適切に最適化し、ページの読み込み速度を向上させます。4.テストとフィードバック: 実際のデバイスやエミュレーターを使用して、レスポンシブデザインが期待通りに機能するかどうかを定期的にテストし、ユーザーからのフィードバックを収集します。レスポンシブデザインは、現代のウェブデザインにおいて不可欠な要素です。ユ

レスポンシブ対応で迷うのはブレイクポイントの設定です。つまり、○○○ピクセル以上はデスクトップ用のレイアウト、○○ピクセル未満はモバイル用のレイアウトと云う決まりごとです。正直、開発者によって違います。わたしは今までの経験から以下の仕様をオススメしてますし、今まで困ったことはありません。max-width: 1440px; をベースにして、横幅 768px 以上はデスクトップ用、横幅 768px 未満はモバイル用の CSS を用意してます。更に、最近はモバイル環境でのブラウズが 60% を超えてることもあるので、モバイル用の CSS をベースにして、デスクトップ用の CSS を書き加えるスキームで仕上げてます。

現在、LPコーディングのご依頼を受付中です。LPコーディングの制作実績を3件作成しました。HTML / CSS を中心に、レスポンシブ対応を含めたコーディングを行っています。カフェLP・美容サロンLP・士業コーポレートLPを制作し、それぞれのジャンルに合わせたレイアウトや余白、読みやすさを意識して設計・実装しました。ポートフォリオはこちらからご覧いただけます。https://coconala.com/users/5915359/portfolios/LPコーディングのご相談も承っております。お気軽にメッセージください。

✅できた・デモサイトでPCファーストの練習 ・PCファースト用のブレイクポイントmixin作成＆スニペット登録 ・ウォーキング9931歩 ・1セットだけ筋トレ 💡学んだ ・いっかい、SPファーストで作ったものをPCファーストにひっくり返すのは、思ってたより手間 mixinだけじゃなくて、こまかく個別にブレイクポイント当ててるのとかも修正なので... 📍次やる ・とりあえず、手の空いてるうちはデモサイト作りで練習とアウトプット 🐶雑談  PCファーストでサイトを作るの、別に難しいことをしてるわけではないですが、 やはりほぼ初のことをやると、 そこそこ確認とか準備の手間で、慣れるまで時間かかりました 準備さえできて、スニペットに登録してしまえば、あとはそれ使うだけなんですけどね... 最初から自分でやったら早かったんですが、ずぼらしようとしてAIにmixin書かせたりとか、コードの書き直しさせたら、 ま～、大嘘つきまくってくれました なんか、Geminiコードアシスト、エージェントに切り替わった？？かなんからしいんですが、 いままで自分が学習させたの履歴とかもリセットされたんですかね？？ なんか、今日のGeminiコードアシスト、いけてなかったです やはり、AI依存は危険ですね... まあ、お世話になりまくってるんですけどね...笑

面白いかどうかは分かりませんが、ブログを始めました。仕事の関係で、毎日更新とはいきませんが、なるべく休まずに続けていければと思ってます。あと、ブログだけでなく、仕事の募集も開始します。徐々に増やしていく予定ですが、まずはホームページの作成から。一回の依頼3,000円から承りますので、興味を持たれた方は是非ご連絡くださいませ！

今回は絵を描こうと思ったのですが、どうしても液タブの調子が悪いのです・・・ というわけで、すみません、今回も文章メインです。 先日公開した架空のホームページですが↓何が一番難しかったかというと、やはりレスポンシブ対応です。 自分はウェブデザインの勉強を始めたばかりのころ、レスポンシブ対応はパソコン版とスマホ版を用意すればいいくらいにしか考えていなかったのですが、そう甘くはありませんでした。 パソコン、スマホといっても様々なサイズがありますし、タブレットというものもあります。 ブレイクポイントの設定も迷いますし、さらに、ブレイクポイントとブレイクポイントの間でも見え方がかなり変わってくるのですね。 どんなデバイスでもデザインが崩れないようにする難しさを実感しました。バナーのお仕事、依頼してあげてもいいよという方がいらっしゃいましたらうれしいです。 ココナラにて、設定できる値段の最安値で出品しています。 ラフ提案と修正無制限、オプションなどによる追加料金なしのコミコミパック料金です。 何卒、よろしくお願いいたします。