By proceeding to the checkout you are confirming you are legal drinking age of 18 years or older. Proceed to checkout
By proceeding to the checkout you are confirming you are legal drinking age of 18 years or older. Proceed to checkout
Jason Santa Maria is a designer with over 20 years of experience leading multidisciplinary teams across product, editorial, marketing, and branding. I care about craft, collaboration, and lifelong learning. I believe that good design can make complex things fun-sized and accessible to everyone. I live and work in Philadelphia under a pile of books. I’m currently a UX Manager at Shopify on the Stor
2017年6月29日 Webデザイン 今回はデザインの基礎をお勉強しましょう!デザインは複数の要素(エレメント)と原則(プリンシプル)から成り立っています。それらを簡単に説明するとともに、要素と原則を生かしたWebサイトを一諸に紹介します。私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。ぜひ参考にしてみてください! ↑私が10年以上利用している会計ソフト! デザインの要素(エレメント)と原則(プリンシプル)は全てのビジュアルデザインの基礎と言われています。要素はデザインの「表現手段」を形成し、原則は「構造的特徴」を構成します。デザインにおける要素と原則の認識は、視覚構成をすることにおいての最初のステップ。Webデザイン、グラフィックデザイン、プロダクトデザインなど、すべてのビジュアルデザ
「自分が考えていることを、その場で決められた時間の中で他の人とシェアしないのは、プロとして犯罪に近い」 「プロというのはシステムで仕事をする人間である」 「いつ来るか分からない15分のために常に準備をしているのがプロで、来ないかもしれないからと言って準備をしないのがアマチュア」 などなど、非常に刺激的な言葉が次々と飛び出したのが、CEDEC2011の2日目基調講演「「ムーンショット」 デザイン幸福論」です。 国際的な活躍を続けるインダストリアルデザイナー、奥山清行氏による講演となっており、「実際に会場にいらした方に直接語りかけたい」という本人の強い希望によって、ニコニコ動画「CEDECチャンネル」での配信や講演資料の配布はなし、「最後の瞬間まで講演内容を考えたい」ということで演題・内容についての事前発表もなし、という直前まで謎のベールに包まれていた講演だったのですが、見ての通り少し書き出し
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいw はじめに:デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
はじめにパワーポイントというのは、今や企画書作成用ツールとしてビジネスになくてはならない存在になった感があります。ぼく自身も、本業は企画者なので、これまで数え切れないくらいの企画書をパワーポイントで書いてきました。そんな中で、最も気をつけ、また力を入れてきたのが「デザイン」でした。内容もさることながら、見た目の美しさや、読んでみたくなるような構成・演出、読みやすさなどに、何よりこだわってきました。なぜかといえば、企画書というのは、多くの場合、まず手に取ってもらうまでに大きなハードルがあるからです。その次に、実際に見て読んでもらうまでにまた大きなハードルがあります。 企画書というのは、書いたら必ず読まれるというものではありません。むしろ多くの企画書は、ほとんど読まれない運命にあります。なぜかといえば、企画書というのはたいていいくつも提出されるからです。一つの案件に対し、10個も20個も提出さ
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演(アウトリーチ活動)の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者(研究仲間や審査員、一般市民)へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
グリッドシステムとは、スイスのグラフィックデザイナー:josef muller blockmann(ヨゼフ・ミューラー・ブロックマン)が考案したデザインの手法です。 1981年に刊行した「Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung」は、さまざまなレイアウトにグリッドシステムを用いて、繊細にデザインが行われています。 このグリッドシステムは、エディトリアル デザインで広く利用され、今日ウェブデザインにも多くの影響を与えています。 グリッドシステムの概要 グリッドシステムの機能 グリッドシステムをサイトに導入するメリット グリッドシステムに関する書籍 グリッドシステムの概要 グリッドシステムとは、縦横線の格子(グリッド)を下地として、そこに出来たブロックごとに図版や文字を配置し、デザインを行う
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 今日は盛り沢山なので気合入れていきたいと思います。 本日最初のキーノートは、ウェブ解析業界の重鎮、ブライアン・アイゼンバーグ氏による「21 Secrets of Top Converting Websites」。昨日と言い,今日と言い、キーノートが両日解析系の話題。実用的ではありますが、ワクワクするような未来の話も聞きたいな、、、。 まずは「Web Site Sucks(ウェブサイトはくそったれ)」と言う一言で会場の笑いを誘ってスタート。理由は、大半のウェブサイトのコンバージョン率が低すぎるから。現在の平均コンバージョン率は3%。過去10年でデザインや技術は進歩したが、コンバージョン率は余り変わ
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピング
sashaです。 naoya君が前回のエントリーで振ってくれたように、ジョエルテストの話から、ユーザビリティ・テストをどこまで行うかという話になりました。 私が今まで見たユーザビリティ系の記事の中には、追求したら悟りが開けそうな、限りなく奥深いものもありましたが、適度に深く、満遍なくカバーしているユーザビリティ・ガイドライン(原文)を見つけ、以降これを参考にしています。少し前に翻訳しましたので、今日はそれをご紹介いたします。 一般ユーザー向けのWebサービスでは、全部のチェック項目が該当するわけではありません。個人的には、各項目のスコアより、「スコアの説明」という欄を重視しています。現状では何が問題であり、どう解決するべきなのか、そういった思考のプロセスが、「ユーザーのことを思うこと」だと思うのです。 いま、ウノウではフォト蔵のデザイン見直しを行っております。私たちのデザインを省み、
ちょっと必要になって調べ物 をしたのでメモ。ECサイト等 でよく、カード決済が出来る 所があると思いますが、その 決済代行をしている所を探し たので備忘録的に。費用に 関しては要問合せみたいです。 という訳で10社ほどメモ。Paypalは諸事情により、省いておきます。順不同です。 ZEUS EC-CUBEとかosCommerceみたいなオープンソースにも対応してるみたいです。丸井がここを導入してるようです。 ZEUS イプシロン GMO系列ですかね?慶應義塾が導入。 イプシロン J-Payment 東大とかが導入。Suicaにも対応してるみたいです。 J-Payment テレコムクレジット 実績例がもう少し欲しいところです。。モバイルにも対応。 テレコムクレジット ルミーズ EC-CUBEなど各オープンソースにも対応しています。なかなかよさ気。 ルミーズ PAYGENT こちらも各CMSに
EC-CUBEを導入したのですが、 サーバーとの相性がどうも良くなく、 運営できてもトラブルが怖いので 他のCMSで再構築を検討しています。 そこで色々とEC系オープンソースCMSを 探したところ、やたら見つかったので まとめておきます。 EC-CUBE日本国産のEC系オープンソースのCMSですが、どうもサーバーを選ぶので導入は微妙。 日本語なのは大きな魅力なんですが・・・ EC-CUBE osCommerceなんだかんだでこれが一番かも。テンプレートも多数出回っています。 日本語化もされてます。 osCommerce日本語 osCommerce本家 Zen Cartこれも有名。osCommerceから派生?したCMSです。これも日本語化されてます。 Zen Cart日本語 Zen Cart本家 MagentoMagentoもかなり見かけますね。海外ではVS osCommerceみたいな
色と消費者 色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。 黄色 楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。 赤 エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。 青 信頼と安全の色。銀行や企業のメインカラーとして使われます。 緑 裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。 オレンジ 活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。 ピンク ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。 黒 パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。 紫 落ち着き
2017年6月29日 Webサイト制作, Webデザイン プログラミングに詳しくなくてもECサイトを設置できちゃうCMSがたくさんあります。そんなCMSを紹介…しようと思ったのですが、かちびと.netにまとめ記事があったので、そのへんはシロ氏にお任せして、今回はECサイトのデザイン部分に焦点をあててみたいと思います。ECサイトではその商品やマーケティングが重要になってきますが、サイト全体のデザインを工夫してユーザーの購買意欲をより刺激しましょう! ↑私が10年以上利用している会計ソフト! 1. 商品のデザインと合わせる ECサイトのデザインは、その商品を知ることから始まります。例えば商品が服ならそのブランドのデザインコンセプトはもちろん、どんな人が、どんな場所で着るのか、素材やよく使われている色合いなどを研究してみてください。 Apple http://www.apple.com/jp/
HTMLとJSだけで何か作ることが多くて,開発環境をどう作るかとか,ノウハウみたいなのがたまってきたと思う. ローカルのHTMLファイルをブラウザで開くと,いろんな制約がある.たとえば,ファイルAPIを使えないとか,YouTubeのプレイヤー貼り付けできないとか,/js/みたいに絶対パスで指定することもできない.ページ1枚なら他のページにリンクとかいらないけど,ウェブサイトを作ってるときとかは,/help/でヘルプページを表示するとか書いたときに,ローカルのファイルを見てリンクが切れてるということになる.開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い. サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う.HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う. 開発中は,nginxでフ
こんにちはこんにちは!! 今日はちょっとCSSのメモです! 半透明について! opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く