BtoBのLP制作で使える基本の構成とデザインのポイント | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
見出し例としては「〇〇を使えば解決できます」、「〇〇が選ばれる3つの理由」等となります。 商品・サービスのスペックを羅列するのではなく、どんな悩みをどのように解決できるか＆解決できる理由を伝えます。 説明文を長々と並べただけでは分かりにくく読まれないので、文章は簡潔にし、理解の助けになるようであればグラフやイラストを活用します。 特にBtoBのLPでは購入に至るまでに複数人が関与し、より慎重に購入を検討されるため、感情に訴えるよりも、費用対効果やお客様の事業にどんなメリットが生まれるかを合理的に伝えることが重要です。 *** またワイヤーでは画像と文章を左右交互に配置していますが、そのレイアウトってどうなの？といった内容の記事が参考になります。 情報を含んだ画像は整列型のレイアウトでもジグザグ型のレイアウトでもうまく機能する。 装飾のための画像は縦に並べよう。 ユーザーはリストの最初の画像
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
JavaScript is not available.
Something went wrong, but don’t fret — let’s give it another shot.
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
株式会社 闇
このサイトでは不可解なことが起こ🅒呪🅗ﾉ?ります弊社は責任ｦをぉぉｵ🅘負い🅞ﾀ?ｽｹ?@かねますの㊰で予Жめご了承 くださいこのサイト🅡ﾀｽ@ｹ??け🅘ては呪Жﾜﾚています。🅚ﾀ@助け🅞ｹてﾉ¶@呪ﾜﾚ¶れて🅚いま🅞@す殺🅝?呪う呪う呪ｳ呪ｦ呪うｳｳ?🅘ｦ?🅘🅡ﾀｽｹて?🅤
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
stock.xchng - the leading free stock photography site
Get free picture, templates, mockups and graphic resourcesLooking for free pictures or visuals? Choose the type of free stock image you need
ソースをダウンロードできるXHTMLテンプレート61 – creamu
デザイン・コーディングの参考になるサンプルを探している。 そんなときにおすすめなのが、『61 High Quality And Free xHTML Templates Part 2: Year 2010』。ソースをダウンロードできるXHTMLテンプレート集です。 かっこいいものが揃っていますね。 YIW Minimal シンプルなデザイン。スライドショーつき Black & Blue 黒ベースにブルーが映えるデザイン DesignHQ かっちりしていますが、大胆なスライドショーがついているデザイン Digital Web フェードイン&アウトで切り替わるスライドショーがついている、クールなデザイン CleanInterface 適度な余白が美しいデザイン XHTML / CSSのソースがダウンロードできるので、参考にしてみてはいかがでしょうか。JavaScriptファイルなども入っていて
商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと. net
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能（Commercial use）なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約（Terms of Use等）をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真商用サイトでも利用できるロイヤリティフリー、パブリック
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
素晴らしいHTMLメールテンプレート配布サイト – creamu
HONGKIATで、素晴らしいHTMLメールテンプレートがまとまっています。 ざっといくつかご紹介。 Campaign Monitor – 30 FREE HTML Newsletter Templates OutlookやThunderbird、Gmaiといった多くのメジャークライアント、Webメールでテストされたテンプレート集 Carbon Graffiti – 10 Free email marketing templates デザインに優れたテンプレート。シンプルなものから凝ったものまで Download PDFなどをダウンロードするリンクのあるテンプレート Welcome サービス登録時のサンクスメールに使えるテンプレート Blog Newsletter ブログをニュースレター形式で配信できるテンプレート。読者との関係作りに Malibu セール情報などをプロモーションする用のテ
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス
最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book
人物、動物、魚、恐竜、植物といった様々な無料シルエット画像
あ"ー。 これは凄いの一言。 もうはてブホッテントリ入りしてるものは紹介しないという私のポリシーを捻じ曲げてでも多くの人に伝えたい。 様々なシルエット、人物から植物、動物、魚などがまとめられたエントリ。 いや、これはすごいわぁ・・・。 あらゆる無料シルエットが勢ぞろい 説明は不要だろう。 すばらしいまとめエントリ。 85 Free High Quality Silhouette Sets リンク先をブックマークしておけばかなり長期的にお世話になれるはずです。 近い将来で私が使いそうなものだけピックアップ。 フッターの背景によくつかわれるやつ。 こちらも同様にフッターの背景に用いられる。 自然をイメージしたサイトに使えそう。 最近ならバリアフリー関係のサイトにもあう。 ビジネス系、SEO系、マーケティング系、ニュース系などに使えそう。 最近は実写が多いですけどね。 上と同様にビジネスシーンに
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトの横幅まとめ - ULTRAZONE
IDEA * IDEA
http://www.designwalker.com/2009/08/usability-test.html
