カラムというのは列という意味ですが、画面の小さいスマホでは、なるべく1つの列のデザインにします。そのほうが見やすいですね。いう3カラムの場合は1カラムに直しましょう。pcでこのデザインの場合だと、レスポンシブでは1カラムにします。長い文の場合は2列に例えばこんなデザインの時です。1カラムですが、スマホの場合は折り返しを気にしながら行も意識しましょう。一般的なレスポンシブはこんな感じにしとけばいいと思います。近接を意識するレスポンシブ対応で見落としがちになるのがデザインの4大原則である近接です。近い情報のものは近い場所におきましょうというデザインの鉄則があるのですが、これがスマホレスポンシブでは結構見落としがちになります。デザインの4大原則についてはこちらにも書いていますので、よければどうぞ!ホームページのデザインを独学するには?私の勉強法を紹介【模写から始めよう】2018.09.08例えばこの部分をレスポンシブにしたい時は、関連のある写真との文字間を狭め、関連性のある写真と文章をまとめましょう。この部分の文章の感覚だと、上の写真についての文なのか、下の写真の文なのか、ちょうど中間あたりに文章がきているため、わかりんくいですよね、ここの文章の余白を少し大げさにとってあげたほうがいいですね、まとまりが生まれます。左右の余白は20pxほど空けるレスポンシブはただでさえ幅が狭いですが、文字がピタッと画面のふちにある状態もバランスが悪いので、左右の余白は20px前後空けるようにしましょう。こんな感じです!↓こんな感じです!参考になれば!効率のいいwebデザインの勉強ならwebデザインの勉強として、効果的なのは模写です。あるサイトを観察して同じように作ることを繰り返すとデザインのセオリーがわかってくるかと思います。このデザインの目的、意図、デザインによる効果なども自分なりに考えて見るのも力がつきます。!(ブログはこちら)現在フリーランスとしてサイト制作を請け負ったり、制作会社からの依頼でwebデザインをしています。今回はXDでPC用のwebデザインを作るチュートリアルを作りました。・XDは操作がシンプルなので、Adobe入門としても入...このようなデザインができるようになるチュートリアルで、動画で便利な機能や効率化の方法まで一緒に解説しています。XDが初めてのかたでもできるチュートリアルなのでぜひご利用ください!ちづみさん(@098ra0209)のnoteで早速Xdをちゃんと触ってみました!私にも出来た、凄い!動画もとてもわかりやすく丁寧で、優良な教材でした。便利だなあこのツール。!(ブログはこちら)現在フリーランスとしてサイト制作を請け負ったり、制作会社からの依頼でwebデザインをしています。今回はXDでPC用のwebデザインを作るチュートリアルを作りました。・XDは操作がシンプルなので、Adobe入門としても入...サイト制作デザインツイートシェアはてブGoogle+PocketfeedlyProgateのhtml、cssが終わった方が「コーディングで稼ぐレベルになるには」をガチ研究したのでわかりやすく解説するweb制作のフリーランスが安定した売り上げを作るための戦略をまとめてみたRECOMMENDこちらの記事も人気です。@098ra0209会社員→小学校の先生→フリーランス国内外を旅しながらホームページ屋をやっている人です。現在は日本各地や東南アジアを転々としながら生活しています。ノマドの働き方や、フリーランスのあれこれについて発信しています。