いち🦔 | Web・UIデザインのコツ紹介

Web・UIデザインが上手くなるコツをご紹介✊普段はアプリのデザイナーをしてて、たくさん対話を重ねながら、クライアント様と一緒に作っていくようなものづくりが得意です🔥よろしくおねがいします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

マージンをなんとなく決めていませんか？🫣

その都度「これくらいかな？」と決めるのではなく、きちっと数値で決めましょう！ できるだけ8の倍数にする、などのルールを決めると考えやすくておすすめです！👏

#UIデザインのコツ

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

動画のインターフェースに対してできることは決して多くありません🤔多くの動画は「横長16:9」のアスペクト比で固定されていますが、横長であれ縦長であれ、あとはどこに配置するかという自由度が残されている程度です✅なお「C Chanel」のように携帯を使って作成された動画では縦長のものもあります🔥

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

おはようございます☀
動画はメインのコンテンツとして用いるだけでなく、補助的な用途として、背景に動画を流す方法「バックグラウンドムービー」で活用することも可能です😉動画があることで、サービスの魅力は向上していきます☺️✨
#おは戦50130jg🌛

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

テキストや画像と並び、「動画」は避けては通れないほどインターネットの重要なコンテンツとなりました😌どのデバイスであっても動画は多用され、画面が大きいデバイスほど、よく視聴される傾向が強いです✅画面が大きいデバイスほど、大勢で見るのに適しているでしょう☺️✨

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

おはようございます☀
スマートフォンやタブレットでは、基本的にモダンブラウザが実装されており、かつ解像度が高いデバイスも多く見られます✅したがって、SVGは相性が良い画像フォーマットと言えるでしょう✨ロゴや単純な図形の場合には、積極的にSVGを活用したいところです☺️
#おは戦50129jn🍨

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

SVGは画像ファイルですが、その実体はテキストで記述されており、あたかもテキストデータと画像データの中間のような特性を持っています✅GIF・JPG・ PNGの画像形式と比較してメリットも多く、最も大きな特長としては、解像度の影響を受けずにOSとブラウザによって最適な表示が担保されることです🔥

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

おはようございます☀
写真など複雑な画像はSVGに向いていませんが、単純な形状と色で作られた画像はSVGに適しています✅描画する内容によってはファイルサイズがとても軽く済み、実体がテキストデータであるため、エディタで編集できることも特徴的です✌️
#おは戦50128jd🍩

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

GIF、JPG、PNGなどのように、1pxごとの情報を集積した画像形式をラスターデータと呼ぶのに対し、SVGやPDFなどのように、幾何学的な計算によって描画される画像形式をベクターデータと呼びます✅Webサイトやアプリでは、ベクター型の画像データとして主にSVGが使われているのです😌

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

おはようございます☀
ベクターデータは、計算によって描画される画像ファイルなので、画面の解像度が高くても低くても、その環境に最も見合った表示が行われます✅したがってテキストデータと同様、拡大しても表示が荒れることがありません☺️
#おは戦50127jk🍺

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

簡易的かつ現実的な対応としては、たとえば価格.comのように、すべての画像を2倍の解像度として用意するという方法もあります✅等倍の解像度は縮小して表示し、3倍以上の解像度では引き伸ばして表示するなど🤔また、人間は3倍以上の解像度の違いはほとんど認識できていません😌

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@harapeko_algo 留年エンジニアさんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@keisan 本日もよろしくお願いします🥰🙌

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

おはようございます☀
画像を解像度ごとに最適化する方法は、どのようなものが適切か🤔例えば、HTML５．１で実装されたレスポンシブイメージでは、表示し分ける方法についてサポートされるようになりましたが、画像のバリエーションを複数作成する必要がある点は変わっていません✅
#おは戦50126jm🌴

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@gonzuiDx ごんずいさんお疲れ様です🥰🙌

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@maayaconcierge まあやさんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@takayan_free たかやんさんお返事ありがとうございます✨
大事ですよね✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@moto8543 もとさんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@chimudondon00 ちむさんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@bochiko1115 ぼち子さんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@RyTDaR りょうたさんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@Saaaatomi_D Satomi さんお返事ありがとうございます✨
ツイート参考になれば光栄です☺️🙏
今後とも宜しくお願いします！

[いち🦔 | Web・UIデザインのコツ紹介 @ichi_uiux]

@tak_design04 たかてぃさん、おはようございます☀✨
焦らずじっくり考えて決めたいものですよね🥰
はじめまして。いちと申します。
Webデザインのコツをツイートしています✒️
良かったら仲良くしてください❀ 𓂃𓈒𓏸
フォローさせていただきますっ。