*designに関するsgtakeruのブックマーク (319)
-
sgtakeru 2016/03/02
-
Android版「マネーフォワード」をマテリアルデザイン対応したときのあれこれ - Money Forward Developers Blog
エンジニアの黒田です。 この度Android版「マネーフォワード」アプリをマテリアルデザインにフルリニューアルしました。 そしてなんと！！！ おかげさまでGooglePlayの「2014年ベストアプリ」に選出いただきました！ GooglePlay 2014年ベストアプリ アプリのDLはこちらから 家計簿マネーフォワード【投資・資産管理】 この記事ではマテリアルデザイン対応するにあたり、考えたことや実際に書いたコード、使ったツールなどあれこれと書いてみたいと思います。 マテリアルデザインとは マテリアルデザインとはGoogleが発表した新たなデザインガイドラインです。 モバイルに限らず、AndroidWearやAndroidTVなど様々なデバイスでもユーザーに対して同じ体験を提供することを目的としています。 マテリアルデザインに関する細かい説明は割愛しますが、GoogleMapやGMailな
-
Googleからマテリアルデザインな無料アイコンがリリース！ | 學展 学展
そんなMaterial Designにぴったりのアイコンがグーグルよりリリースされました。 なんとその数750個！ PNGデータや高dpiファイルそしてSVGデータでご利用頂けます。 また内容は ・action ・alert ・av ・communication ・content ・device ・editor ・file ・hardware ・image ・maps ・navigation ・notification ・social ・toggle とWEBデザインやアプリのデザインをする際に使い勝手のいいアイコンを無料でダウンロードすることが出来ます。 ダウンロードはこちら https://github.com/google/material-design-icons/releases/tag/1.0.0 それではどのようなアイコンがあるのかいくつかみてみましょう！ ■maps
-
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
-
坂井直樹の”デザインの深読み”
久しぶりにこのブログを再開する。毎日疑問に思うことをChat GPTに聞くという実験を始める。まず第一回は小説家「村上春樹は毎年ノーベル賞受賞候補に上がりながら、毎年かなわないのはなぜでしょうか？」とChat GPTに聞いてみた。 村上春樹がノーベル文学賞の有力候補として毎年名前が挙がる一方で受賞を逃す理由については、明確な公式の説明がないため、いくつかの推測や議論が存在します。以下に主な理由として考えられる点を挙げます： 1. 選考基準の多様性ノーベル文学賞の選考は、文学的な価値だけでなく、地域的、文化的多様性を考慮するとされています。村上春樹は広範な国際的評価を受けていますが、ノーベル委員会はあえてより知名度の低い作家や、これまで十分に評価されてこなかった地域・言語の文学を選ぶことがあります。 2. 作風やテーマの評価の分かれ村上春樹の作品は、ポピュラリティと文学性のバランスが取れてい
-
世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com)
[対象: 上級] この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。 美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロール そのサイトは、ニュースメディアサイトの QUARTZ です。 「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。 注目してほしいのはブラウザに表示されるURLです。 無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。 下方向だけでなく上に戻ればまたそれに対応してURLが変わります。 titleタグももちろん切り替わります。 個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。 そして、そこから無限スクロールが始まります。 記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。 Mozのランドもイ
-
Jenkinsのビルドパイプラインでテストからデプロイまでを自動化 | HAWSクラウドサービス
開発プロジェクトでは、よく以下のようなライフサイクルが回ってる。 テストの実装 プログラムコードの実装 テストの実行 テストが通ったらコードをリポジトリにPush 定期的にCIサーバがリポジトリをチェックし変更があったらCIサーバ上でテスト実行 テストが通った状態のアプリケーションを検証環境へリリース 検証環境でのテストが通ったら、本番環境へリリース ※実際は５～７の間にDBのバックアップやマイグレーションとかいろんなタスクが結構ある。 このうち実際に人がやらないといけない作業は大体１～４ぐらいで、５～７については人が作業する必要はなく、自動化できる対象作業。同じ作業といっても手順が複雑であればミスをする可能性もあるし、人がする必要が無い作業を何度も人がするのはムダだ！ということで、今回はJenkinsを使って５～６の作業を自動化してみた。 必要なプラグイン 以下のJenkinsのプラグイ
-
その選択、ちょっと待った！NoSQLデータベースへ乗り換える前に検討すべき3つのポイント
最近、どうも安易に「NoSQLにすれば厄介なDB設計から開放される」と考えている人が多いように思えて仕方がない。だが待って欲しい。本当にNoSQLと呼ばれるデータベースを使えばアプリケーションの開発・運用の苦しみから逃れられるのだろうか。もちろん「そんなことは無い！！絶対にだ！！」と私は考える。今日はその理由について語ろうと思う。 トランザクション先日、リレーショナルデータベースにおけるDB設計についてセミナーで解説したばかりだが、リレーショナルデータベースにおけるデータの整合性は何もDB設計だけが担保しているわけではない。リレーショナルモデルと同じかそれ以上に欠かせないのがトランザクションだ。 トランザクションがあるおかげで、トランザクション終了後のステータスは「成功」か「失敗」の2つしかないということが保証される。すなわちオール・オア・ナッシングだ。もしトランザクションの途中で何らかの
-
IDの設計についてのさらに突っ込んだ議論
今日も前回に引き続きデータベース設計の話をする。今回の話で一旦データベース設計については筆を置くつもり（ブログ書いてないで原稿書けよ＞俺）であるが、その前に話をすっきりさせて置きたいと思う。最後を飾るテーマはIDの設計である。 数字しかないのに意味を含んだID前回のエントリを見ていただいた方から、次のような構造を持った学籍番号があるというフィードバックを頂いた。 全部数値で"入学年度下2桁"+"学科コード"+"学科内のあいうえお順の順位" このようなルールで割り当てた学籍番号を、単なる数値として扱うのであれば大きな問題はない。これは数値しか含まれていないので、SQLのデータ型としては単に数値型を使えば良いだろう。だが、学籍番号から入学年度を判断する、あるいは学科を判断するといった用途で使われるのであればやはり適切ではないといえる。リレーショナルモデルの観点だけからではなく、IDとして適切で
-
最良のインターフェイスとはインターフェイスを持たないことだ - Nothing ventured, nothing gained.
Visual Basicの父とも言われるAlan Cooperが立ち上げたCooperに所属するGolden Krishnaが数日前に書いたブログ記事が面白いので、ざっと抄訳してみた。 "The best interface is no interface"と題されたこの記事の中で、彼は「最良のインターフェイスとはインターフェイスを持たないことだ」と主張する。 インターフェイス前提の社会 AppleのLisaは、DOSのようなCUI（キャラクターユーザーインターフェイス）から、GUIの世界にデザインを一変させた。そして、Palm Pilotから現在に至る情報機器はマウスさえ必要なく、タッチで操作できる世界を実現させた。この流れが現在のデザインの問題をすべて解決することになった。 では、良い自動車を作るにはどうするだろう？ そうだ、インターフェイスをそこに載せよう*1。 良い冷蔵庫を作るには
-
-
-
富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure
2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通（研究所）の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、本エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。本エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる（高齢者にとってのユーザビリティ）。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色（青、緑）の感度低下 聴覚機能の低下 高い周波数帯の
-
ズルいデザインテクニック2013 + セミフラット version
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…
-
Gitを使ったデザイナーとプログラマの協業について話してきた #P4D #phpcon2013 - 納豆には卵を入れる派です。
常連プログラマがほぼ Rubyist しかいないP4Dなのですが、なぜかPHPカンファレンスで枠をいただいたとのことで、デザイナーとGitについて話し合ってみようという企画に参加してきました。 「生煮えぷるり」をプログラマとデザイナーの間で行ったり来たりさせる話 Pull Request 4 Designers - GitHubを使ったプログラマとデザイナーのイテレーティブな開発フロー// Speaker Deck GitHubを使った、実際のプログラマとデザイナーの協業の様子を見てもらおうということで、私がお手伝いさせていただいている、[https://forkwell.com:title=Forkwell] と [https://jobs.forkwell.com:title=Forkwell Jobs] での開発の様子を例にお話させていただきました。 補足とか 「生煮えぷるり」という
-
デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。
-
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
-
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
-
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
-
「設定次第で何でもできる万能アプリ」がクソアプリである理由と、その向うにあるパラダイム - 石橋秀仁(zerobase)書き散らす
【これはとてもひねくれた文章なので、「実用的な情報を速やかに収拾したい忙しいビジネス・パーソン」は読まないほうがいい。警告はした】 【役立つ部分をさくっと読みたい方はシンプル版を用意しました】 fladdict氏の『スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する』は素晴らしい記事だ。 その記事のコメント欄でのやりとりが気になった。 【某氏】 先生！ 設定画面で全てのUI機能要素を ON/OFFしたり、configファイルの編集でボタンのレイアウトを変更できれば良いと思います！ 【fladdict氏】 その思想をつきつめると、設定オンオフで音楽プレイヤーからFacebook閲覧までユーザーが自在に切り替えられる万能アプリへの道に進むのです・・・ 【某氏】 やりたいことが何でもできる万能アプリの複雑性と、デフォルト設定のシンプルさは両立しますからね。初めて
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
