これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
ChatGPTを利用して画面モックを爆速で作成する - Taste of Tech Topics
こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。
2019年1月24日 CSS, HTML, Webサイト制作 HTMLやCSSの書き方を勉強してみたという初心者さんから、いざ自分でWebページを作っていくとなると、何から始めればいいのやら…？という声をよく耳にします。きちんと構成を考えてコーディングを始めないとレイアウト崩壊の危機…！今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。 ↑私が10年以上利用している会計ソフト！ 今回作るWebサイト例 こんな感じの、よくあるヘッダー・メイン・サイド・フッターで構成されたWebサイトを作っていく手順を考えていきましょう！ 1. ファイル、フォルダーを作る まずは必要なファイルとフォルダーを用意します。必要なファイルやフォルダーはそのWebサイトによって変わりますが、基本的にはプロジェクトフォルダーの中に index.html、CSSを入れる「css」フ
デザイナーが下層ページを作るときに最低限おさえておきたい9つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、デザイナーのヴィクトリアです。 わたしが日々の業務でやらせてもらう機会の多い「下層ページのデザイン」。下層ページのデザインとは、主に先輩デザイナーが作成したトップページのデザインをもとに、文字どおり下層ページを作成すること。ページ数の多いサイトではよく手分けをして作業しますね。トップページのデザインを渡されたらまず、デザインをじっくり見て確認します。ここの考査を怠ると、下層ページが全然違うページに仕上がり修正の嵐になるわけです。 今回は、そうならないために気をつけたいポイントを備忘録としてまとめました。当たり前のことばかりですが、忘れないように気をつけたいです！ 確認するポイント 1. サイトの目的 下層ページから案件に入るときにまずおこなうことは、トップのデザインがどういう経緯でできあがったのかを知ることです。この経緯を知らないと、もとのデザインの意図とずれてしまい、戻しが
2022年更新 ホームページ制作費用の相場｜目的で変わる料金相場 | 大阪 バリューエージェント
サイトごとにかかれているホームページ制作料金の相場がバラバラで、どれが本当の料金相場なのかがわからない。と感じていませんか？ 実際のところ、Googleで「ホームページ制作 費用 相場」等で検索して表示されているWEBサイトがいう料金相場は、決して間違えているわけではありません。 しかし、ホームページに求める効果・目的次第で、ホームページ制作費用の相場が大きく変わるので、適正な料金相場がわからないことが問題なのです。 こういった背景を踏まえてこの記事では、下記2点のことが分かります。 効果・目的別に必要なホームページの違いアナタの求めるホームページを制作するための適切な費用相場この2点がわかれば、使い物にならないホームページを作る事もなくなり、無駄に費用を掛けなくて済む助けになるかと思います。 ホームページ制作の費用相場（早見表）ホームページとはいってもコーポレートサイトや採用サイト、ポー
サルワカ | サルでも分かる図解説明マガジン
レゴランドの水遊びはどれがおすすめ？ウォータメイズとスプラッシュパッドはどっち？ 2024/06/17
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
サイトのメインビジュアルに悩んだときに参考にしたい！11個のレイアウト手法 - Hatsuka
最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN｜美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ
商用利用OK！2016年にリリースされた無料フォント30 | Webクリエイターボックス
2016年12月20日 フォント 2016年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント あさご本丸ゴシック 上品な丸みが可愛らしいフォント。軽やかさをいかしたポップなデザインに仕上がります。豊富なバリエーションは有料。 マキナス 2008年に制作開始したマキナスフォントが更に読みやすくなってリリースされました。約6,600字に対応。見出しに大きく打ち出して使うとかっこよさそう。 マメロン 約6,600字に対応しており、画数の多い漢字でもきれいに表示されます。個人的にはこのフォントの漢字がとっても好み！全角英数字は一文字ずつボタンのように枠がつきます
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
のんびりデザインしているような。
『全部無料！デザイナー必須のおしゃれでかわいい手書き英語フリーフォント50選！ - I AM HARRY』へのコメント
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
