Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
打ち消し線で「選択」を表現するデザイン
意味わからんからやめてほしい こういうやつ ・りんご ・バナナ ・マンゴー ・みかん ・グレープ パット見でみかんが選択されてるように見えるか？？ ＿＿＿＿ え、知らんの？ちょいちょい見かけるけど 最近見たのだと、Candy Appleの看板 これは選択として使ってないけど 「CUT TAKE or TAKE OUT」となってる https://www.google.com/maps/place/%E4%BB%A3%E5%AE%98%E5%B1%B1Candy+apple+%E6%9C%AC%E5%BA%97/@35.6520479,139.7046341,3a,75y,90t/data=!3m8!1e2!3m6!1sAF1QipPjZgtXp99lwBvTPZzpF3Jm3vJt2INLCw4M-JRO!2e10!3e12!6shttps:%2F%2Flh5.googleusercont
無料でダウンロードできるフォントを書体や見た目のイメージから検索できる「モジザイ」
インターネット上ではさまざまなフォントが配布されていますが、何となく使用したいフォントのイメージはあるものの正式名称がわからなかったり、フワッとしたイメージしかなくてどうやって検索すればいいかわからなかったりといったケースはよくあるもの。そんなフォント選びに困った場合に役立つ、書体やイメージワードから300個の日本語フリーフォントを絞り込み検索できるサイトが「モジザイ」です。 モジザイ https://www.mojizai.com/ モジザイを開くとこんな感じ。 モジザイでは「書体から検索」と「イメージワードから検索」があり、それぞれ表示されているタグを選択することでフォントの検索ができます。試しに「明朝体」をクリック。 スクロールすると、明朝体のフォントが絞り込まれて表示されました。記事作成時点では、モジザイでは362種類のフォントへのリンクが含まれており、そのうち明朝体は31件ヒット
［CEDEC＋KYUSHU］ガンパレや絢爛舞踏祭の芝村裕吏氏が，カレルシステムで目指すものとはなにか。その詳細を語った「LOOP8にみる群体型AIとその運用について」
［CEDEC＋KYUSHU］ガンパレや絢爛舞踏祭の芝村裕吏氏が，カレルシステムで目指すものとはなにか。その詳細を語った「LOOP8にみる群体型AIとその運用について」 編集部：Junpoco 2023年11月25日に福岡県の九州産業大学にて開催されたゲーム開発者向けカンファレンス「CEDEC＋KYUSHU 2023」で，「LOOP8にみる群体型AIとその運用について」と題された講演が行われた。 2023年6月に発売されたマーベラスのジュブナイルRPG「LOOP8」（Switch / PS4 / Xbox One / PC）の特徴となっていたのが，プレイヤーが選択した行動によって，周囲のキャラクターの感情や人間関係が変化するゲームシステム。同システムの根幹をなすのが，カレルと称される群体型AIだ（LOOP8における正式名称は「エモーショナルAI」）。講演では，ゲームデザイナーの芝村裕吏氏が，
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
Google Fontsからちょっと面白いフォントがリリース！ 商用利用無料、折れ線グラフや棒データを描くためのフリーフォント
折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。 Linefont | Wavefont フォントのライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。 まずは、Linefont。 Linefontは中小規模の折れ線グラフ（時系列など）を描画するためのフォントです。値は0～100の範囲でさまざまな文字に割り当てられます。範囲、値、ウェイトはWavefontと互換性があり、視覚的な一貫性を維持しながらフォントを交換できます。
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど
2022年現在、UIデザインツールの使用状況を調査した「2022 Design Tools Survey」を紹介します。 急いでいる人用に一言でいうと、Figmaがっょぃ。 2022 Design Tools Survey 2022 Design Tools SurveryはUX Toolsでおこなわれたアンケートの調査結果（4,260人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、10年以上の経験者がもっとも多く、次いで3-5年、6-10年となっています。今年はリモートワークの人がもっとも多く、次いでハイブリッド、オフィス勤務となっています。
[CSS] フォントのアンチエイリアス設定
CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。 ※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装しているみたいです。 WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意が必要です。 アンチエイリアス調節のデモ(効果が見えるのはMacのみ) Webkit用CSS Webkitには-webkit-を付与。 .example{ -webkit-font-smoothing: none; //ぎざぎざ -webkit-font-smoothing: antialiased; //なめらか -webkit-font-smoothing: subpixel-antial
![[CSS] フォントのアンチエイリアス設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b5c655bcc1d733e1ff2562f2c5c34f36fa88c9/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F03%2Fsmoothing1.jpg)
画像を設置した時にできる隙間を無くす | GRAYCODE HTML&CSS
img要素で表示した画像にわずかにできる隙間を消す方法を解説します。 この記事のポイント 画像の下に生じる隙間を解消する 画像の下に生じる隙間を解消する 画像はそのまま表示すると、勝手に余白が生じることがあります。 余白が分かりやすいよう、親要素に背景色でグレーを敷いています。 この余白を消すには、vertical-alignプロパティを指定します。 コード例 <style> figure { display: inline-block; width: 300px; background-color: #999; } figure img { max-width: 100%; vertical-align: bottom; } </style> <figure><img src="./images/banner.png" alt="基礎から応用まで！HTML&CSS"></figure>
スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう | b.
webサイトで、ブラウザの高さに合わせてファーストビューを作る場合、CSSでheightを100vhに設定すると、実際にスマホで見た場合、若干下にはみ出てしまう問題を解決します。 PCブラウザのレスポンシブモードなどでチェックしながら作っていく段階では気がつかないやつです。 vhとは CSSのViewportを基準にした単位の１つ。 Viewport Hightの意です。 100vhでブラウザの高さ目一杯なので、1vhはブラウザの高さの1/100です。 vhがあるんだからもちろんvwもあります。 Viewport Widthで、100vwで横幅目一杯になります。 よくある、ブラウザのサイズに合わせてファーストビューをデザインする場合、要素の幅や高さを100vh、100vwにすれば、どんなサイズで閲覧しようとも、縦横目一杯に表示することができるので簡単・便利🙆♀️ <div>Box</d
CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール
レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語のフォントでも最適に利用できます。 Fluid-responsive font-size calculator Fluid-responsive font-size calculatorは、レスポンシブ対応のfont-sizeを可変にするスタイルシートもこの計算機で簡単に生成できます。font-sizeは最小値と最大値を決め、その間のサイズはcalc()関数でスムーズに変更させます。例えば、スマホなどの小さいスクリーンでは16px（最小値）に、ワイドスクリーンでは24p
フォントサイズ・ブロック要素の比率を維持しながら可変させる
画像であれば、例えば「640px×480px」で作成されていれば、CSSで「width:100%;」を設定すると自動的に縦横の比率を保ってレスポンシブル対応してくれます。 ですが「div」などで枠を定義し、その枠の比率を保ったままレスポンシブル対応するにはコツが必要です。 デモ デモページ サンプルコード スタイルシート .nav-box { max-width:200px; height:auto; background:rgba(250 149 157); padding-top: 30%; /* padding-top(%) = 高さ / 横幅 * 100 */ position:relative; } .nav-box p { color: white; position:absolute; top:50%; left:50%; transform: translate(-50%,
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
ワンボタンゲームをたくさん作ったので、その作り方をおさらいしたい - ABAの日誌
English version: How to realize various actions in a one-button game はじめに 自作ゲームライブラリcrisp-game-libを使ったミニゲームを最近たくさん作っているが、特に多く作っているのがワンボタンゲームだ。ここで言うワンボタンゲームは、レバーによる移動の他のボタンが1つ、といったものではなくて、純粋に1つのボタンしか操作に使わないゲームを指す。 ワンボタンゲームの利点は、操作が分かりやすく、タッチデバイスでも操作しやすい点にある。とにかく何かボタンを押せばそれがプレイヤーが取れる動作の全てであり、操作説明がほぼ不要である。またタッチデバイスでも画面中のどこかをタップあるいはホールドすれば操作ができるので、バーチャルパッドでよく起こる、ボタンを押した感触が無いので操作がしづらいという問題が発生しない。 欠点は、当然
ピクセルフォントが大好物な人に！第1・第2水準漢字まで収録された商用無料のフリーフォント -マルモニカ
ピクセルフォントが大好物な人に朗報です！ ピクセルフォントを多数リリースしているx0y0pxFreeFontから新作フォント「マルモニカ」がリリースされました。 可読性に優れたピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されています。さらに、ライセンスも太っ腹で、商用無料、ゲームやスマホアプリへの埋め込みもOKです。 マルモニカ マルモニカの特徴 マルモニカのダウンロード x0y0pxFreeFontの他のフォント マルモニカの特徴 マルモニカは、ピクセルフォントを多数リリースしているx0y0pxFreeFontの新作フォントです。 ピクセルが形作る曲線美を追求した丸ゴシック体のピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されていま
FontAwesome をサーバーにUPして使う - Qiita
./font-awesome/4.7.0/css/font-awesome.min.css ./font-awesome/4.7.0/fonts/FontAwesome.otf ./font-awesome/4.7.0/fonts/fontawesome-webfont.eot ./font-awesome/4.7.0/fonts/fontawesome-webfont.svg ./font-awesome/4.7.0/fonts/fontawesome-webfont.ttf ./font-awesome/4.7.0/fonts/fontawesome-webfont.woff ./font-awesome/4.7.0/fonts/fontawesome-webfont.woff2 <head> <link rel="stylesheet" type="text/css" href=".
応用68. 入力フォームで使うCSS
応用68. 入力フォームで使うCSS 公開日：2017年07月16日 最終更新日：2022年08月10日 form関連の要素の特徴 form関連の要素はOSやブラウザによって初期値がかなり異なります。クリックアイコンやドラッグアイコンなどのパーツも異なります。そのためCSSで見た目を完全に同じにすることはできません。 この章では、ある程度見た目を統一できる箇所を解説していきます。input, textarea, select, buttonは初期値がdisplay: inline-block;のため、width, heightの指定が可能です。またinput, buttonは高さを変更してもテキストが常に上下中央になります。 input要素とtextarea要素のCSS radio, checkbox, submit, reset以外のinput要素、textarea要素では初期値に下記の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【追記】フライパンのパンフに載ってたこの擬人化キャラ、目が覚めるようなキャラデザで衝撃走る「天才すぎ」「発想がすごい」
