とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
四畳半ワークス+1.5
とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
優れたUIデザインを作るために知るべき12のTips | Goodpatch Blog
こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介
最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！ こちらは拡大レンズがついているので
2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog
こんにちは！ 先月の頭に書いた記事「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」が 今でもかなり多くの方に読んでいただけているようでとても嬉しいです。今回のブログは「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」でご紹介した「メトロUI（フラットデザイン）」にフォーカスした記事です。 （下記はDesignmodoの記事「Flat Design: Can You Benefit from the Trend?」の翻訳です） 最近よくフラットデザインが取り入れられているWebサイトやアプリを見かけます。このトレンドはWindows 8とGoogleの新デザインがリリースされた事で人気になり、他のサイトなどでも取り入れられ始めました。デザインの装飾をたくさん使わず、フラットデザインはメッセージや製品、アイデアをユーザーに伝えるシンプルな方法です。ぜひ今のトレ
思わず目を引く！クリエイティブな海外のバナー広告デザインまとめ16個 | Goodpatch Blog
ブログやWebサイトを見ていると必ず目に入るのがバナー広告です。 バナー広告は、とりわけその広告先の情報を求めているわけではないが、 潜在的に興味がある人にリーチするための広告です。 デザイナーとしては適切なメッセージを簡潔に伝え、クリックしてもらえるようなバナー広告を作らないといけません。 Creative Web Banner Ad Designsという海外の記事で、Webのバナー広告をデザインするときに下記の事を心に留めておくべきと書かれています。 ◯どこに広告をだすか？ 競合企業がどんなバナー広告を出しているのかを確認し、クライアントのブランドイメージを守りながら競合、またはその他の広告より目を引くものでないといけません。 ◯広告のターゲットは誰か？ 広告のターゲットに合わせたデザインにする ◯その広告は何を販売しているか？ ユーザーが混乱しないようにメッセージ/製品と一致したバナ
[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
続：デザイナーじゃなくてもWebディレクターになれますか？
こんばんは。非デザイナー出身のWP-D Ivoryです。 前回こんな記事を書きました。 デザイナーじゃなくてもWebディレクターになれますか？ この記事について、当ブログ内のコメントや知人から直接挙がった意見で、以下のような意見がチラホラと目につきました。 「デザイナー経験のないディレクターには説得力が無いから困る」 このような意見を出す方の多くは実体験に基づいて意見されてますので、至極もっともだと思います。 僕のような非デザイナー出身、または経験はあってもデザインに疎いディレクターのために負担を強いられたり迷惑を被ったりされたのでしょう。 実は前回の記事を公開する前からこれらの批判（≠非難）は当然出て来るものと考えてまして、ただそれについても書いてしまうと話が冗長になってしまいそうなので突っ込みどころを残したまま公開しました。まとめて書いちゃうとすぐにネタ切れしちゃうからではありませんよ
WEBデザイナーでも出来る！SSHコマンド超入門
胃潰瘍だと思ったら、ストレス性の胃腸炎でした。こんにちは、WPDクリアです。 散々胃が痛いだの、ゴハン食べれないだので辛い思いして胃カメラ検査して、やれ胃潰瘍だ やれ胃ガンだ やれピロリ菌だ 検査したら全て陰性で、 先生「暴飲・暴食・後はストレスだね～」 先生、全部当てはまってます！ みんなも胃腸には気をつけよう！そんなわけで ｢WEBデザイナーのためのすぐに役立つSSHコマンド超入門」 を、胃腸に優しくお送りします！ SSHって何？ ネットワークを介して別のマシンにログインしたり、コマンドを通して遠隔操作するためのプログラムで、これらのやり取りは暗号化されており、安全に操作を行うことが出来ます。 まあ、あれです。 WEBデザイナーが苦手とする「黒い画面」のことです でも、毎日の業務でSFTPやSCP使っているでしょ？ 黒い画面は無理！というデザイナーさんでも、毎日SFTPやSCP対応のW
案件の価格決めをどうしているのよ？
どうもどうも、こんにちは。WP-Limeです。 Limeって黄緑色らしいです。色決めの時に、Facebookを見ていなかったら、空いている色が無くなっていて黄緑色になってしまったということで、ディレクションできない派です。 さてさて、このWebサイト「WP-D」に初投稿のLimeの今日の記事は、案件の依頼があった際に、価格決めについて、皆どうしているの？とりあえずLimeはこうしていますよ、ということを記事にしてみます。 制作だの納品だの言っても、依頼が無いと始まらない議論ですしね。 どこかの偉い人は、「請負案件において、価格と納期が決まっていない仕事は、仕事ではない。」と言っていました。その通りだと思います。 請負案件での価格決め １．予算が提示されていないパターン 知り合いからの紹介や、インターネット上の問い合わせフォームから、案件が来ることがありますよね。 そういう時に明確な予算感が
ポートフォリオにも使える！自分のクリエイティブを公開出来るサービスまとめ13
ポートフォリオを公開する WEBCRE8.jpはもともと私が自分で作ったサービスや作品、クリエイティブを公開するための場として作った側面も強いです。そういったものはカテゴリーの「作る」で公開していますので気になる人は見てみてください。今年はここを充実させたいですね。 作るWEBCRE8.jp そして、ブログ以外の手段でもこれらを公開することができます。まあ、ドロップボックスとかでもいいんでしょうけど、せっかく公開するのであればプラットフォームからの露出も期待できたり、公開に関する機能が充実している方がいいですよね。 今回はクリエイティブの種類によってどういうサービスを使って公開できるのかを紹介しましょう。 グラフィック グラフィックの公開については一番簡単で、かつ選べるプラットフォームが多いと思います。 apollo
Ankiのカードをブラウザから追加したかった。 - 自分探せ
決して後退しない学習ーAnkiを使うとどうして一生忘れないのか？ 読書猿Classic: between / beyond readers Ankiの記事を見たので便乗。 最近Ankiを使い始めてて、効果のほどはまだ分からないけどまあ楽しく使っている。用途としては英単語を覚えるのがメイン。んでWebを見ていて知らない英単語があると、調べては手作業で追加していたのだけど、これがだるいなーと思ったので自動化した。ブラウザ上で単語を範囲選択、右クリックのメニューからAnkiへの単語追加コマンドを実行するだけで、追加がすむ様になった。ただしMacに限る。仕組みに使ったパーツは、 辞書引きプログラム false-git/dict · GitHub コマンドラインからMac標準の辞書を引くプログラム。コンパイルして~/dict/dictに設置。 Run External Commands Anki -
iOSアプリ開発でZXingObjCを使ってQRコードを読み取る | DevelopersIO
今回は、iOSアプリ開発で ZXingObjC ライブラリを使い、URLの QRコード を読み取り、ブラウザで表示するサンプルを作ってみたいと思います。 実は、先日書いたZXing 2.1のブログ とほぼ同じ動きをするサンプルになりますが、 今回は ZXing を Objective-C に移植した ZXingObjC ライブラリを使用します。 ZXing で手間のかかった環境設定周りの作業が、ZXingObjC ではほとんどなくなるので、非常に使いやすくなっています。 環境構築 今回は、以下の環境を使用します。 ZXingObjC 2.1.0 Xcode 4.6 iOS SDK 6.1 iPod touch 5th まず、サンプル用のプロジェクト「SampleZXingObjC」を作成します (「Single View Application」テンプレート、ストーリーボード使用、ARC使
すべてのものに理由はある。脳科学に基づくデザインの法則 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも僕です。LIGブログがリニューアルされて、今まで以上にコンテンツの内用が重視されるようになって、我々中の人も、身が引き締まる思いだよ。主に、下半身あたりがね。あれかな、まだ寒いからっていうのもあるのかな。キュッてなり続けている。キュッて。 今回は、人間の脳科学の観点から、視覚的なデザインの法則をご紹介かつご解説しようではないか。 実際にものを見ているのは脳である コンピュータに詳しい人なら、 携帯とかにくっついているデジタルカメラは、 光の三原則であるRGB（赤、緑、青）の色の強度を感知する、 センサーの集合体で構成されるものだとご存知だろう。 実際、人間の目でも、 目で見える情報を各色の強度を感知する細胞の集合体で感知し、 電気信号情報に変換して受信しているわけである。 つまり、目はデジタルカメラと同じように、 色の集合体として情報を受け取る。 しかし、その情報を実際に処理している
動作も軽く使いやすいモックアップ作成ツール・「Moqups」
Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Moqups
「ユーザーである」と「ユーザー目線がある」は全然違います、全然 : けんすう日記
ザッカーバーグ若者じゃない記事 ザッカーバーグが若者じゃなくなったからFacebookは大変だという話 こんな記事を書いたところ、それなりに読んでいただいたようです。ありがとうございます。 実は同じ記事内に書こうと思って悩んでやめたものがあるのですね。そこの部分の追記を書きたいと思います。 それは「ユーザーであることとユーザー目線があることは違う」ということです。 自分がユーザーじゃないとサービス作れないか？ 上記の記事を簡単に要約すると 「自分がメインのユーザー層とかけ離れると、サービスを作るのは難しいかも」 的なことになります。 しかし、もちろんですね、自分がユーザー層でなくてもいいサービスは作れるのです。当たり前ですね。自分がユーザーであるかどうかなんて、ユーザーにとっては関係なくて、「自分たちが使いたいサービスであるかどうか」のほうにしか興味ないわけです。 @cosmeなどの化粧サ
Webサイト高速化対策の現状
はじめに はじめまして、こんにちは。クラスメソッド株式会社でWebを担当している野中です。 この度、「これから身につけるWebサイト高速化テクニック」と題して記事を連載させていただくこととなりました。 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて高速化に関する手法や技術について調べ、身につけたテクニックを細かな解説を加えて紹介していきます。中には少し難しいテクニックも含まれますが、できる限り分かりやすく、すぐに実践できるよう紹介していきたいと思います。とても長い連載ですが、よろしくお願いいたします。 なお、本連載はクラスメソッド開発ブログで連載されている「身につけておきたいWebサイト高速化テクニック」の増補改訂版です。 本連載の流れ 本連載はできるだけ多くの方に興味を持っていただけるように、最初に高速化対策の全体像と必要な知識を紹介します。その後、具体的な高速化対策と
シンプルなアウトラインがいい感じ！ミニマルなアイコン素材 -Free Outline Icons
商用でも無料で利用できる、フラットなデザインにも合うミニマルなアイコン素材を紹介します。 素材はベクターなのでサイズやカラー変更は簡単ですが、ブラックのほかにグレー・ホワイトも用意されています。
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
まさにWebサイトを見たままに編集できるWYSIWYGエディタ·fresherEditor MOONGIFT
fresherEditorはcontentEditableを使ったWYSIWYGエディタです。 オンラインでコンテンツを編集する際にはWYSIWYGエディタを使うことが多いように思います。色々なライブラリが存在しますが、今回はfresherEditorを紹介します。jQueryベースのエディタです。 デモです。テキストエリアの枠がないのが印象的です。 編集状態です。枠が出ています。 WYSIWYGなのでその場で反映されます。 画像の追加も行えます。 フォントの選択もできます。 fresherEditorではcontentEditableを使ってコンテンツを編集可能にしています。デザインについてはBootstrapを使っています。まさに見たままに編集できる、そんな感じのソフトウェアになっています。 fresherEditorはjQuery/JavaScript製のソフトウェア（ソースコードは
働く女性にとって有利な国ランキング 日本は26カ国中25位 - 世界のニュース記事
2013-03-10 働く女性にとって有利な国ランキング 日本は26カ国中25位 仕事 イギリスの新聞 The Economist が、「世界の先進国26カ国で働く女性がどれだけ優遇されているか？」を示す表を発表した。 【原文：The glass-ceiling index】 これは経済協力開発機構(OECD)によるデータが主なもので、世界の先進国26カ国を5つの指標を使って評価したものだそうだ。 指標とは以下の5つ。 1. 男女それぞれの第3次教育(高等教育)以上を受けた人の数 2. 女性労働者の数 3. 男女の賃金の差 4. 上級職に就いている女性の割合 5. 平均賃金と比較した児童保護サービスの価格 この結果、トータルではニュージーランドが最も評価が高く、フィンランドは教育が最も良く、スウェーデンは女性労働者の数が78%と最も多く、スペインは男女の賃金差が6%と最も小さかった。 ち
[Mac] ロック付き PDF を簡単に作る方法
OS X 標準アプリのみでパスワードロック付き PDF が簡単に作れる プレビュー.app さえあれば OK！ ロックを必要とするようなファイル例じゃないけど気にしないでね（笑） 以下に手順を記しますがやり方はとても簡単です。
Toshi Omagari | 続・身近な書体：Arial
いよいよお待ちかね、Arial誕生秘話の後編です。前回は何故Arialが作られたのか（why）について説明しましたが、今回のテーマはどうやって作られたか（how）で、さらに書体デザイン寄りの話になっていきます。頑張って説明はしますが、かなりテクニカルな話だと思いますので途中で諦めていただいて構いません。まだ前編を読んでいない方はこちらからどうぞ。 IBMは最初の業務用レーザープリンタ「3800」の後継機、「3800-3」を作るにあたって、タイポグラフィを改善することを決めました。初号機の解像度は144dipで、書体は一応選べたものの全て等幅で、サイズも最大3段階からしか選べませんでした。3800-3では解像度が240dpiになり、良質の書体を搭載し、サイズの選択肢も増やすことが次の課題となりました（前編で初号機の解像度が240dpiであるかのような書き方をしてしまいました。ここでお詫び致し
プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト
素人とプロを分ける4つのソフトを紹介します 少しでも早く、少しでも的確に伝えたい。そんなプロ根性を支える、無料ソフトを紹介します。 「しょせんは無料ソフトでしょ？」とあなどる無かれ、プロのデザイナー御用達のPhotoshopでもできないことをやってのけます。 目次 PNG画像を劣化させること無くサイズを圧縮する「PNGGauntlet」 JPEG画像を劣化させること無くサイズを圧縮するソフト「carmine」 JPEG圧縮で劣化した画像を綺麗に直す「Jpeg Enhancer」 デジカメの高感度ノイズを除去する「Neat Image」 PNG画像を劣化させること無くサイズを圧縮する「PNGGauntlet」 WebでPNGを圧縮してくれるサービスは多々ありますが、ネットワーク経由のやり取りのため、利用者の多い時間帯にはレスポンスが悪く、エラーで処理できない場合もあります。 WordPres
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Monaca
オン/オフの切り替えスイッチをスタイル・「On/Off Flipswitch HTML5/CSS3 Generator」
公務員が公開するネ申Excelが日本の生産性を落としている話