イベント用の名札シート印刷アプリ「参加者の名は。」を作った - エンジニアをリングする
こんなものを作ってみました。 yoshiko-pg.github.io ConnpassのイベントURLを入力してCreateボタンを押すと、名刺サイズの参加者の名札を印刷プレビューできるようになっています。 （主催するイベントがないけど動きを見てみたい場合、入力欄右下の「demo」を押すと雰囲気がわかるかと。） 右下の印刷ボタンで印刷できます。 管理者や補欠者もお好みで含めることができます。 背景 カンファレンスや勉強会って、普段ネット上でしか知らない人と直接話せる機会でもあると思うのですが、いざその場で顔や名刺を見ても誰が誰かわからないんですよね。。 SNSではよく見るけど顔がわからなくて、でも話したいことがあるときとか、頭の上にアイコンとIDが表示されるメガネがほしい・・・ってたびたび思ったりします。 そんな思いから、自分がスタッフとして関わっているイベントではアイコンとIDの入った
Webサービスの配色をどう決めるか
ご無沙汰しております、大堀です。 いつかきっと役に立つと信じて先週末はウイスキー検定を受験してきました。 第一回目ということなので、これで受かれば国内初の【公認】ウイスキーに詳しいUIデザイナー です。 ウイスキー関連のお仕事お待ちしております。 さてタイトルにも書いた通り、今回はWebサービスの配色の決め方について書いてみたいと思います。 仕事柄、新規サービスの配色を決める場によく立ち会います。 すぐに決まることは稀で、デザインラフを制作して実際に見てみないと…なんてこともよくあります。 それでも最後に決める瞬間はやってきます。今回は「なんでその色にするのか」をきちんと理解し、皆が納得できる決定をするために考えなければいけないことは何でしょうか。 ただ先に結論を言えば、配色に唯一の正解なんてありません。笑 ＊＊＊ まず漠然と”配色”と言っていますが、色について語る前に、 ・色は単独では存
紙のデザイナーがウェブ開発できるようになるまでに必要なこと
絶対に成功する方法なんてないですが、デザイナーが挫折せずにウェブアプリケーションをつくるためには、いくつかポイントがあると思うのでまとめようと思います。 グラフィックデザイナー出身の自分自身、プログラミングの本を買っては本棚に積み、何回も挫折しています。 その時の経験を踏まえ、デザイナーがプログラマーの域に足をつっこむための近道を考えてみました。 ここでいうウェブ開発は、ウェブサービス開発であり、Wordpressでブログをつくることではありません。自分のオリジナルのアプリケーションをつくることを言っています。また、実際にどうやってアプリを作るかという技術的な話でもありません。 photo by pakutaso.com こんな人が対象かもね グラフィックを主に生業としているけどウェブもつくりたい。 企業ランディングページ以外もつくりたい。 ウェブやらないとやばいんじゃないの？と感じてる。
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
Placeit - Generate Product Screenshots in Realistic Environments 画像をiphone画面に合成してキービジュアル作成
Thousands of Free Templates Just for You! The easiest way to create professional designs for free! Choose from our ever changing library of free mockups, designs, videos and logos. The Largest Collection of Mockups on the Internet! Drag and drop your designs to our mockups to create beautiful product shots!
ますます高まるデザインの重要性！デザイナーが立ち上げたWebサービスまとめ | Goodpatch Blog
エンジニアが立ち上げた会社と言えば、GoogleやAmazon、Facebookなどが有名ですが、デザイナーが立ち上げた会社と聞いて皆さんはどんな会社を思い浮かべますか？その優れたデザインで話題になったPinterestやPathなどのサービスは、デザイナーが共同創業者として名を連ねており、デザイナーが会社を立ち上げることは珍しくなくなってきました。そこで今回のMEMOPATCHでは、創業者（または共同創業者）がデザイナーのWebサービスを8つ紹介します！ Pinterest https://pinterest.com/ デザイナーEvan Sharpは友人二人とサイドプロジェクトとしてPinterestを作りました。とはいえあくまでサイドプロジェクトであったため、その後Facebookでデザイナーとして働きはじめます。EvanはPinterestが気になっていたものの、当時のPinte
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
皆の「良い」を作り、話し合うプロセス
2012年10月20日、金沢歌劇座で UX Kanazawa が開催されました。先月、basecamp NAGOYA でおこなったプロトタイピングのセミナーの金沢版になります。主催者の @ichigami さんのご好意で急遽金沢で開催することができました。かなりギリギリの告知だったのにも関わらず定員オーバーでキャンセルなしという高出席率の会になりました。 基本的に名古屋で行った内容を継承していますが、3時間半という長い時間を活用して名古屋ではカバーできなかったことを金沢で行うことができました。ワークではチーム別で作ったプロトタイプの意図を発表する時間を設けることができましたし、批評の場をもつことが出来たのが長時間イベントの魅力。私の心配とは裏腹に懇親会に持ち越して話し合いをするという濃い時間になりました。 話し合うための領域設計 目的なしにプロトタイプを作るとコスト高になるだけでなく、話し
『スマホブラウザサービスのボタン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2011年入社の根岸と申します。 9月まで「あそんで♪HuggPet」というゲームのディベロッパーをしており、10月から新規ゲームのプロジェクト責任者（PS）をしております。 今回の記事では、「あそんで♪HuggPet」で使用している「ボタン」の実装方法について、少しだけお話させていただきたいと思います。 ボタンは押したらハイライトしてほしい先日、居酒屋で「すみませ～ん！」と大声で店員を呼んだのですが、反応がありませんでした。 その後、すぐに店員が来たので問題無いと言えば無いのですが、私は店員に声が届いているのか不安で、危うくもう一度大
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 （#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/） @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
新しくWebサイトを作る際に疑いたい制作側の常識
ここ最近クライアントの受託制作や自社のWebサービスでユーザー様の声を見ていて気がついたことがあるので書いてみます。 iPadやスマートフォンの普及でWebサイトがより身近になってきて、今までPCを起動するのが面倒だった方まで気軽にインターネットを使うようになってきています。 その分、Webサイトを作るにもいろいろなことを配慮しないといけなくなってきています。 デザイン、インターフェイス的に各媒体に最適化されていることも大事ですが、Webサイトを見慣れている人の常識というのを少しづつ疑って、見直していく必要があると思うのです。 制作側の常識が通じないとネットリテラシーが低い、などとまとめてしまうような風潮もありますが、そのリテラシー自体見直すべきなんじゃないかな？なんて思ったりもします。 実際にWeb制作業界ではない色々な方のご意見をうかがったうえで、Web制作をする際に、自分たちが割と「
2012年 デザインの4つの課題
ここ 1, 2 年でアプリが爆発的に増えただけでなく、スマートフォンの普及により Web がさらに身近になりました。便利な世の中になったかのように見えますが、今見るトレンドから新たな課題が浮き彫りになりました。今年末から来年にかけて、デザインの観点から解決していきたい課題が 4 つあります。こうした課題を Web やイベント、会合を通して議論できたらなと考えています。 一貫性のないジェスチャーインタラクション マルチタッチスクリーンは、インタラクションデザイナーに新たな可能性を提示たのと同時に、大きな課題を残しています。ジェスチャーUIの課題と対策でも指摘しましたが、現状ジェスチャーにはスタンダードと呼べる操作がなく、アプリごとに異なる解釈をしています。 iPhone のメールアプリで左から右へスワイプをすると「削除」のボタンが右側に表示されますが、同じジェスチャーを Twitter 公式
『LINE』『クックパッド』『Wantedly』のUI開発に見る、技術者が陥るUIデザイン3つの罠と、その解決策【五十嵐悠紀のUI/UX座談会】 - エンジニアtype | 転職type
『LINE』『クックパッド』『Wantedly』のUI開発に見る、技術者が陥るUIデザイン3つの罠と、その解決策【五十嵐悠紀のUI/UX座談会】 2012.09.05 スキル CG・UIの研究家として知られる五十嵐悠紀さんの連載17回目。今回は特別企画として、今旬のPC・スマホWebサービス『LINE』『クックパッド』『Wantedly』のUI/UX担当者に登場してもらい、UI/UX座談会を開催。後編は、エンジニアがUI/UX設計に携わる際に陥りがちな罠とその解決策を紹介してもらった。人気サービスを生み出したデザイン設計プロセスから語られる、本質的な価値とは一体何なのだろうか。 前編：『クックパッド』『LINE』『Wantedly』ヒットサービス担当者が語るデザイン設計の極意【五十嵐悠紀のUI/UX座談会】 【ファシリテーター】筑波大学 システム情報工学研究科 コンピュータサイエンス専攻
ハンドメイドマーケットEtsyで語られない3つの強さ | 川崎裕一 | yukawasa.com
Etsy的なハンドメイドマーケットが日本では中々盛り上がらない。 前Etsyの中の人と話す機会があったときにその理由がわかった。 Etsyは、 1.楽天大学のようなしくみがある。閲覧が増え、売上が増えるような、きれいな写真の撮り方、文章の書き方などの教室を一週間にオフィスで何回もやる。 2.クリエイターへのサポートが半端ない。その場に日本人クリエイターがいのだけど「Etsyからスポンサーさせてもらえないかしら？」とか言っている。曰く、世界中のフリマとかクリエイターマーケットを訪問して、個別で声をかけまくっている。 3.FacebookやPinterestからの流入が半端ない。1の結果、写真の質があがって、そこからの流入が多い。Etsy担当者も「結構な数」といっているほどだった。 「驚いたのは、Facebook経由でのサイト訪問率が14.5%と非常に高いことです。(※AlexaでのClick
紙プロトタイピングから始まる問題解決への議論
先週オープンしたばかりの名古屋のコワーキングスペース basecamp NAGOYA で、「プロトタイピングからはじめよう」という題名でセミナー＋ミニワークショップを行いました。今年の春に開催した青森のセミナー以来、2度目のプロトタイピングセミナーになります。前回は、セミナーだけだったのに対し、今回は短めのワークショップ付き。また、プロトタイピング全般の話ではなく、ペーパープロトタイピングにフォーカスした内容にしました。 ペーパーが最強ではない プロトタイピングだけではありませんが、何かを作る話題になると、どうしても「どのツールがベスト？」みたいな話になりがちです。すぐに作れるだけでなく、手を動かすというアナログな感覚が心地良いことから、ペーパープロトタイピングは人気の手法です。しかし、他の手法と同様、弱点がありますし、万能の手法ではありません。 ツールは自分の好みで一途に使うのではなく、
クックパッドデザイナー片山育美さんが語る「ユーザー目的を達成するためのUI」とは — [画面遷移ワークショップvol.2 レポート] | Startup Dating [スタートアップ・デイティング]
前回、5月に開催した「画面遷移ワークショップ」。その第二回を開催しました（前回の様子はこちら）。二回目となる今回は、日本最大の料理レシピサイト、クックパッドのUIデザイナー、片山育美さんをゲストにお招きしたトークセッション。後半には前回同様ソーシャルゲームの分野で活躍中のポケラボさんからお題を提供していただき、画面遷移を考えるワークショップを開催いたしました。 前半に6月にStartup Datingにインタビュー記事が掲載されて、大きな反響を呼んだ片山さんは、クックパッドに4人しかいないデザイナーの一人。片山さんはクックパッドのPCサイト、iPhoneアプリ、Androidアプリ、iPadアプリなどのデバイスに対応するデザインなども担当しているそうです。仕事以外にも、趣味がアプリ開発だという片山さん。最近制作した「恋人クイズ」というアプリは現在20万ダウンロードを超えているそうです。 こ
Twitter Bootstrap＋その他で「本当に」イケてるモックを作る手順
こんにちは、 6月に入社したR＆D部の@benzookapiです。 前職はi18nを専門に、JavaやPHPでいろんなwebやクライアントソフトウェアを作ってました。 ブログデビューの今回ですが、意外と情報が不足している Twitter Bootstrapを使った、「本当に」イケてるモック※を作る手順について書きたいと思います。 ※モックとは、携帯電話の見本用の模型などの意味で、ここではWebアプリにおけるデザイナーさんに発注する前の仮画面といった意味で使ってます。 Twitter Bootsrapはいわずもがな手軽にイケてるページを作成できるフレームワークで、解説サイトなどを読むと「おーすげー、こんなかっこいいサイトがたったこれだけでできるんかい」とCSSいじるのがめんどくさい自分のようなエンジニアは感動してしまうのですが、いざそれを実際に開発するアプリに使おうとすると、実は色々不満が出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
心地よいUIの温度 - 言葉と気遣いで高めるUI -
サービスにおけるビジュアルデザインの役割
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
