焼きたてカスタードアップルパイ専門店 RINGOとっておきを、みんなのものへ は「焼きたてカスタードアップルパイ」の専門店。 工房一体型をコンセプトとして、店舗で焼き上げ、いつでも出来たてのアップルパイをご提供しています。 お菓子職人が、とびっきりおいしいアップルパイを作るために日夜、工房にこもって作り続けた結果できたご褒美スイーツ。そんなご褒美スイーツを皆様におすそわけする場がRINGOです。 毎日店頭で焼き上げる、その1つ1つに思いを込め、究極の美味しさを追求します ABOUT RINGO
UIデザイナーはしっかり押さえておきたい、Sketch 3.5の新機能とデザインフローのまとめ
3ヵ月前にSketch 3.4がリリースされ、2016年1月26日に多くの改良とバグフィックスで新しいバージョンのSketch 3.5がリリースされました。 ※2016年2月3日現在の最新版は3.5のマイナーバージョンアップの3.5.1です。 3.5はパフォーマンスの改良だけでなく、機能的にも多くの改善がされており、今まで以上により快適なデザインフローとなるSketchの新機能を紹介します。 What's New in Sketch 3.5? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 アートボードでのタイトル表記 「Retina Canvas」のチェックボックスは除去 キャンバスのちらつきを改善 グルーピング 常に選択されたレイヤーの上に挿入 角度を数値で回転 すべてのガイドを除去 使用しているフォントをすべて表示 アートボード
プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode
原点回帰ということで、たまにはビジュアルデザインのことでも書いてみます。 僕が思うに、プロとアマのデザイン力の決定的な違いは細部の詰めだと感じるわけです。 もちろん、ごく基本的なレイアウトだったり、配色だったりといったデザイン力の向上が何より大事だし、そこさえクリアすれば、ユーザーに対して最低限のおもてなしはできると言っていいです。 ただし、他のモノとは何かが違うより優れたデザインを作り上げるためには、普通のユーザーは気にも止めないようなほんの些細なところに対する気遣いが必要になってきます。 まさに「神は細部に宿る」というやつです。細部を突き詰め出すとキリがなかったりしますが、ここに気づけるかどうかが一流のデザイナーとそうでない人の別れ目のひとつなんじゃないでしょうか。 見た目で揃える
Toshi Omagari | コンペのタダ働き問題
ロゴなんかのデザインコンペを見たときに、なにやら不公平な印象を抱いたことはありませんか。その違和感には名前があるんです。英語圏でのデザイン業界ではspeculative work、略してspec work（スペックワーク）という言葉があります。これは支払いが未確定な仕事、もっと言えばタダ働きの可能性が濃厚な仕事という意味で、特にデザインコンペに対してよく使われる言葉です。 その例を挙げてみます。あなたは企業主で、会社のロゴやウェブサイトなどのビジュアルを誰かに依頼したいとします。そこでコンペということにして多くの参加者を募り、最も優秀なものを選び、その作品に報酬を与えます。こうすることで依頼一件分の予算でたくさんのアイデアを集めることができるわけです。 それでは何故これが間違っているか、また別の例で説明します。あなたはお腹が減っています。そこでいろんなシェフに声をかけて料理を作ってもらい、
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
最先端のデザイン！フラットデザインをサイトに導入する方法 | LISKUL
ひと昔のサイトを見た時、直感的に「このサイト古いつくりだから、アクティブじゃない」なんて感じることはありませんか？ 近い将来、あなたのサイトもこのように思われてしまうかも知れません。サイトのデザインが古いことは、機会損失につながります。 あなたのサイトが少しでも長く愛されるサイトデザインにするために、本日は最新のウェブデザイン手法である「フラットデザイン」についてお伝えします。 ▼目次 1.フラットデザイン概要 2.フラットデザインのメリット 3.フラットデザインの考え方 －ロゴマーク －フォントの選定 －オブジェクトの作り方 －グリッドのマージンの取り方 4.背景に画像を敷く 5.フラットデザインなサイト事例 6.フラットデザインなスマホサイト事例 7.まとめ 1.フラットデザイン概要近年、IOS7やwindows8のヴィジュアルに「フラットデザイン」というものが導入されています。歴史を
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
今のうちに知っておきたい！Googleの「マテリアルデザイン」とは何か？｜モバイルマーケティング研究所｜モジュールアップス – ModuleApps
9月4日、Android版のchrome37安定版が公開され、同時にマテリアルデザインにそったUIデザインに移行しました。注目の集まるマテリアルデザインですが、その全体像が今ひとつ分かりづらい……と感じている方も多いかもしれません。 マテリアルデザインとはどのようなもので、どういった効果があるのかまとめてみました。 マテリアルデザインとは？ マテリアルデザインとはユーザーと端末の対話についてまとめたデザインマニフェストのこと。スマホやタブレット、アプリなどのIT機器だけでなく、メガネや丸い腕時計、家やテレビなど幅広いデザインで使用される概念となっています。 グーグルがマテリアルデザインを採用したのは、今回が初の試みです。アプリの外観部分は簡素化され、従来よりも広いスペースで操作できるシンプルなフラットデザインを採用したことで操作しやすくなりました。また、デザインは三次元性になり、各要素に影
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
Webデザインを変えるとしても、以前のものをすぐには捨てないで
サイトの既存のデザインをいくつかのライバルサイトと一緒にテストすることで、新しいデザインに向けての有意義な洞察が得られる。競合調査によってユーザブルでない新機能の開発を避けられるのだ。 Redesigning Your Website? Don’t Ditch Your Old Design So Soon by Hoa Loranger on December 7, 2014 日本語版2015年1月19日公開 サイトのデザイン変更の準備はできている では、どこから始めればいいだろうか。プロジェクトが最初からうまくいくように手助けしてくれるUXの活動にはいろいろなものがある。その1つがユーザビリティの競合テストだ。すなわち、現在のデザインをいくつかのライバルサイトと一緒に、ユーザビリティについて調査するというものである。コンピュータに飛びついて、すぐにでもデザインを始めたいという気持ちは抑
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
より良いUIデザインを作る為に必要な8つの基礎 | MEMOPATCH
こんにちは、だいきです。 今回はUIに関するおもしろい講演のまとめを見つけたのでブログにしました！ その講演は2011年の年末に開催された「シリコンバレー コードキャンプ」にてCitrixのプロダクトデザイナーであるUday Gajendar氏が 「より良いUIデザインを作る為に必要な8つの基礎 (原文タイトル: “How to Master Good UI Design”)」 にという題目で話したものです。 （Citrixとは…米国フロリダ州に本拠を置く情報テクノロジー企業のことである） 以下がGajendar氏がその講演内で話した8つの基礎的なUIについてです。 （この記事はDICE内の記事 “How to Master Good UI Design”の翻訳です） 基礎1：グリッド/レイアウト/構造 photo credit: adactio via photopin cc Gaje
WebデザインとGUIデザインの違い
ウェブ用のデザインは、従来のソフトウェアユーザインターフェイスのデザインとは違う。概ね、デザイナーが完全な主導権を握るのはあきらめるしかなく、UIについての責任も、ユーザやクライアント側のハード/ソフトと分かち合わざるをえない。 もちろん、ウェブ用のデザインと従来のUIデザインには共通点もある。両方ともインタラクティブなシステムだし、両者ともソフトウェアデザインであって、物理的なオブジェクトのデザインではない。 デバイスの幅広さ 従来のGUIデザインでは、画面上のすべてをピクセル単位でコントロールできた。ダイアログボックスのレイアウトをしたら、ユーザの画面にもまったくそのままの形で表示されるはずだと、安心していられたのである。どんなシステムなのか、どんなフォントがインストールされているのか、通常の画面サイズはどれくらいかもわかっているし、システムベンダーからは、各種インタラクション部品をど
どうやったら独学でWebデザイナーになれるのか デザイン会社 ビートラックス: ブログ
個人や数人のチームで起業することがますます一般的になりインターネットというフィールドを越えて非常な大きな力を振るっている。しかし企業の難しさは根強く残っており、創業者たちに多くの能力が求められていることも事実だ（優れた起業家に必要な10の基本資質）。Webサービスについて云えば、ニーズをもとにした商品のデザインだけでなく、商品の完成やコーディングまでもが必要とされている。 どうやれば半年以内に、独学でインタラクションデザイン・平面デザイン・ウェブデザインやアプリデザインまでを習得できるのだろうか。ここではNaderというデザイナーが綴った、半年間の体験の記事を紹介する。彼の経験はデザイナーに転職したい人だけでなく、数多くのデベロッパーたちにも役立つはずである。参考記事（米国のデザイン教育から学んだこと）と併せて読んで頂ければ、理解がより深まると思う。 米国のデザイン教育から学んだこと すべ
「シンプルなデザイン」の難しさ デザイン会社 ビートラックス: ブログ
日々デザイナーとしての仕事をする上で、クライアントの中には「シンプルな感じで良いので、とりあえず簡単に作って下さい」と言う人がいる。難しい機能はあまり無くても良いから、シンプルなものをさくっと作ってもらいたい、という要望である。 このセリフを聞くたびに、実はめまいにも似た感覚を覚える。 恐らくデザインに対するコストを下げたいとの思いから”シンプルで良いので”と言っているのだと思うが、実はシンプルなものの方が複雑なものよりもデザインするのが数倍も難しい。 それを知らずに、シンプル=楽につくれる=コストが低い、と思っている人々が後を絶たない。大きな間違いである。 シンプルなデザインや、ミニマリズムと呼ばれる極限まで無駄を削ぎ落としたデザイン技法は、最高レベルのデザイン技術を要する。 シンプル = 最高峰の問題解決あっさりして見えるものがあっさりと作られたかというと大間違いであり、最終的なアプト
【改めて基本を解説】デザイナーの役割とその仕事内容とは デザイン会社 ビートラックス: ブログ
ファッションから、グラフィック、Web, 建築、UXまで、さまざまな異なる職種のデザイナーが存在する。 実際の仕事内容はそれぞれのフィールドによって異なるが、”デザイナー”という人達の仕事は根本的には共通してる点が多い。 その一方で、デザイナーに対しての世の中の一般的なイメージはかなり現実と異なる事も少なくは無い。 そんなデザイナーと呼ばれる人達の本当の仕事、求められるスキル、そして日米でのデザイナーを取り巻く環境はどのように異なるかを考えてみたい。 デザイナーは絵を描く以上の仕事デザイナーというと、絵を描いて形だけを決める仕事だと勘違いしている人が多いのだが、実はそれらは最終アウトプットのごく一部であり、本来デザイナーの仕事というのは、与えられた制限の中で、求められる最大限の結果を生み出すプロセスのその全てに関わる職業である。 その仕事の中には、ターゲット層の設定や、どのように売るか、そ
Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin
Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。 Web UI Design Patterns 2014 本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。 ワイヤーフレームや最近のUIを解説したワイヤフレームガイド 2014年、進化しているWebデザインのトレンドをチェックできる無料のE-Book スマホページ・アプリのさまざまなUIの特徴と実装の注意点がまとめられた無料のeBook eBookは全編英語ですが、英語が苦手な人でもグラフィックを見るだけで十分にためになると思います。 本書の中身を簡単に紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
フォントの選び方の参考になる！世界で活躍している有名デザイナーたちが選んだフォントのランキング -Typographer’s Typefaces | コリス
新着記事
