すべてのカテゴリ

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

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

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

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

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

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

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