[B! Web][デザイン] hiroaki256のブックマーク

Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。たとえば、以下のようなデザインは私にとって「紙っぽい」例です。出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

hiroaki256 2024/04/12

リンク

デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話

こんにちは。TAK(@tak_dcxi)です。今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN

hiroaki256 2020/10/18

リンク

【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatena blog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。以下が3年前の前回の記事です。いくつかブレイクポイントを調べましたが、だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x

hiroaki256 2019/08/11

リンク

Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由

こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！目次マルチデバイス時代のナビゲーション理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している理由2：見せられるときは、しっかり見せている理由3：コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙理由4：その時必要なナビ