Web制作の参考になる！サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ | コリス他の人のサイトマップやフローチャートってなかなか見る機会がありませんよね。 そんな時は世界中のクリエイターが集まるDribbbleです。Dribbbleからサイトマップやハイレベルサイトマップ、フローチャートを紹介します。 使用ツールはIllustrator, Sketch, Omnigraffleなどで、機能性だけでなくデザイン性も重視されて作成されています。 サイトマップやフローチャートで使える素材も一番最後にご紹介。
デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
Webクリエイター専用定規「Web型定規」 手描きラフを美しく仕上げるために
テイ・デイ・エス リプラグ事業部は4月13日、Webページの構成案を美しく描くためのWebクリエイター向け「Web型定規」を発売した。価格は1500円と2000円（いずれも税別）。 Web制作で使用頻度の高い「4：3」「16：9」の基本的な画面比率や、「ホーム」「ショッピングカート」などよく使うアイコンなどのテンプレート、画面をグリッド分けするのに便利な12分割用の目盛りが入っている。 手描きでも歪みなく描けるテンプレートを使用することで、アイデア出しやブレストで必要になる手描きのラフを清書する手間を省けるとうたう。社内のWebディレクターのアイデアを元に作られた商品だという。 関連記事 MicrosoftのWebコンテンツ作成ツール「Sway」で共同編集が可能に Microsoftがオンライン版Officeスイートのβアプリとして提供しているWebコンテンツ作成ツール「Sway」に共同編
AppStore用のスクリーンショットを各サイズまとめて作成できるサイト「MakeScreenshots」 | ライフハッカー・ジャパン
「MakeScreenshots」はAppStore用のスクリーンショットを各サイズまとめて作成できるサイトです。iPhone4からiPhone6 Plusまでサイズ別にスクリーンショットを作ってくれます。iPhoneのモックにはめこみ、文字を添えた状態の写真を作成できますよ。 以下に使ってみた様子を載せておきます。まずMakeScreenshotsへアクセスしましょう。アプリのスクリーンショットをアップロードしましょう。 背景に使う色とテキストを決めて完成です。 ダウンロードするとこのように各画面サイズ用のスクリーンショットが表示されます。それぞれアップロードしないといけないので一度にまとめて作成できるのは助かりますね。ぜひアプリ公開時に活用してみてください。 MakeScreenshots （カメきち）
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
ワイヤーフレーム（モックアップ）を作るアプリがすごい進化してた | バニデザノート
ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね？」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてすごいなーとおもったアプリや、無料でもざくざく使えそうなものまでご紹介。 Moqups Free Plan (offers 2 active projects and 5MB of storage) Monthly：Standard active project 10 で $9〜 ログインしなくても無料で組めます。 960gsグリッド表示可能です。 ほぼコンポーネント揃ってます。ほぼ装飾なしなステン
Bootstrap Studio
Presenting Bootstrap Studio, a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework. Learn more What is it? Bootstrap Studio is a desktop application which you can use to build beautiful interfaces and websites by only using drag & drop. It comes with a large collection of components like charts, maps, data tables, forms, menus, lists,
Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
【登録不要】マジで使える無料のWebサイト分析ツール&サービス8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
上、X、下、B、L、Y、R、A、そめひこです。人事部長をしています。 自社サイトの分析、競合他社、類似サイトの発掘と分析って、KPI設定や改修、WEB戦略を立てる上で、とても大事だと思います。僕はそれが結構趣味で、土日とか空いている時間に人気サイトや競合他社のデータ見ては、自社サイトと比較して「やべぇ…」って楽しんでいます。 今回はそんな僕が使っているサイト分析ツール&サービスを無料に限定して8つほどまとめてみました。これが誰かのお役に立てば幸いです。 類似サイト検索：Google https://www.google.co.jp/ 類似サイトを総合的に判断して教えてくれる！ Google検索窓に、【related:URL】と入力すると、類似サイトをピックアップしてくれます。LIGブログの場合だと【related:liginc.co.jp】となります。 しょっぱなからごめんなさい、Goog
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
Webデザインのカラー、レイアウト、エフェクトなどのアイデアに困った時に時間をかけて見たいサイトのまとめ
Webデザインのカラー、レイアウト、エフェクトなどのアイデアに困った時に時間をかけて見たいサイトのまとめ
意外！女子の理想の葬儀は散骨だった!?
額に蛾がとまってますよ。 そう、博士くらいになると額に蛾がとまることもままあるんじゃ。 すごい！ さすがさんこつ博士…。 どうやったらうまく散骨できるか、知りたいかね？ はい！ 私、自分の骨を自分で散骨するのが夢なんです！ それは無理なんじゃないかのう。そもそも散骨とは、火葬後の遺骨を粉末状にし環境に配慮したうえで合法的に海や山などの自然に還す葬送の形式を言うんじゃ。 一瞬、すごく怖い顔しませんでした？ ド素人の、えーと君…。 エリコです。 ド素人のエリコちゃんが散骨をうまくやるには、実はカンタン…。「博士の散骨5,000箇条」を守れば、それでいいんじゃ。 は、博士の散骨5,000箇条!? なに、構えることはないぞい。どれも初歩的でカンタンなことばかりじゃ。 教えて教えて！ ざっと紹介すると…。 散骨5,000箇条その1
これから新しいサイト・ブログを無料で作るならTumblrがオススメな理由 - AIUEO Lab2
Tumblrとは画像やテキスト、動画などを投稿・共有できるウェブログサービス。 Tumblr ネット上の好きな画像や動画、文章を簡単にクリップして共有できるので、スクラップブック代わりに使っている人も多いはず。位置づけとしてはTwitterとブログの中間「ミニブログサービス」とでもいうのでしょうか。 tumblrとは ウェブの人気・最新記事を集めました - はてな Tumblrってなに？ビギナーのための基礎知識や始め方・使い方 - はてなニュース でも、実はTumblrは無料で使えて静的なページも作れる立派なCMS（コンテンツマネジメントシステム）です。 投稿は簡単で、広告も入らず、アフィリエイトリンクの設置も自由で、独自ドメインも使える。加えて、サーバーの必要もなく容量もほぼ無制限で、予約投稿や、複数人での運営もできて、Markdown記法も使える……Tumblrすごい。 はてなブログは
初めてのWordPressで集客できるブログを作るまでの使い方まとめ
WordPressはオープンソースのCMSとして、日本で圧倒的なシェアを確保しており、2020年8月時点で83.1％がWordPressを利用している。人気の理由は誰でも簡単に無料でWEBサイトを作れることだろう。 通常、ホームページの制作を行うには「HTML」や「CSS」といった言語を自分で記述して作成する必要がある。そして、面倒なことにせっかくHTMLでホームページを作成しても新しいページを作成したり、既存のページを修正する際にもHTMLやCSSで記述する必要が出てくる。 WordPressのようなCMSはHTMLやCSSの編集を極力無くし、管理画面上でホームページ全体や、ページ単位での投稿・加工・編集を可能にするシステムなのだ。 簡単に言ってしまえば、「コードが書けず、専門知識がない人でも簡単にサイト・コンテンツを管理できるシステム」ということになる。 ※参考：Distributio
CIMANETIC
scene95 scene94 scene93 scene92 scene91 scene90 scene89 scene88 scene87 scene86 scene85 scene84 scene83 scene82 scene81 scene80 scene79 scene78 scene77 scene76 scene75 scene74 scene73 scene72 scene71 scene70 scene69 scene68 scene67 scene66 scene65 scene64 scene63 scene62 scene61 scene60 scene59 scene58 scene57 scene56 scene55 scene54 scene53 scene52 scene51 scene50 scene49 scene48 scene47 scene46
１年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY
Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京銭湯 - TOKYO SENTO -
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP