タグ

designに関するterasuyのブックマーク (43)

  • 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ

    2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか? この画面遷移図というものは来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、来で

    画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
  • しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則

    レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ! FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ

    しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則
  • Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision

    Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n

    Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
  • 新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版!

    おはようございます。CD藤です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ!! さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト(以下ブクマサイト)だ!という5サイトを紹介します。 (今回はパソコンサイトを扱うブクマサイトに限らせて

    新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版!
  • スマホUI考(番外編) UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict

    いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か? ビッグオー駆動開発は、正式には『OKAN Driven Development(オカン駆動型開発)』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト

  • UI-patterns.com

    User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.

  • [JS]これは楽しい!スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js

    スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"

  • 「とりあえずUI直せば、どうにかなるんじゃないか病」になった話

    「とりあえずUI直せば、どうにかなるんじゃないか病」が私の周りで流行している。もちろん私も何度となくかかっている。 この病気のはじまりは「目的を達成できないのはUIがいけてないせいだ!UIをとにかく今じゃない何かに変えれば問題は解決する」と思っちゃうことにある。 共通するのは、「とにかく今じゃだめなので、今じゃない何かにしたいからUI変えたい」という点。今じゃない何かにしたいのはわかるが、根拠が主観的すぎて成功する見込みがつかないのが困ったところ。 もちろん私も時にこの病気にかかり、ほんとにプロジェクトをすすめていいかどうか、どーしていいかわからず懊悩することも多々ある。というわけで、私なりに病気の定義と、自己治療法もなんとなく見つけたので、自省もこめて記録しておく。 「とりあえずUI直せばどうにかなるんじゃないか病」の主症状2点 根拠が主観的すぎて説得力がなく、社内を巻き込めない 人が

    「とりあえずUI直せば、どうにかなるんじゃないか病」になった話
  • 月15万PVを生むブログをデザインしたときに徹底した7つの要素

    ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ブログを始める以上は、誰だって、出来るだけ多くの人に見て貰いたいものだ。 そこで、私はブログを始める前に、国内外の人気ブログを30個読み込み、人気ブログに必須の要素リサーチをした。 そして、その中から、共通点を7つに絞り込み、実践した結果、ブログを始めてから3週間で15万を超えるアクセスを得ることができた。 下図は、5月1日〜20日までのアクセス解析だ。 そこで、日は、私がブログを始める上で調べたブログデザインの7つの要素を全てご紹介する。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続け

    月15万PVを生むブログをデザインしたときに徹底した7つの要素
  • ディレクターが指摘すべきデザインの注意ポイント10個

    ずいぶん久しぶりの投稿になってしまいました。申し訳ない。 今回はタイトルの通り、ワイヤー上がった!デザイン依頼した!で上がってきたデザイン案(もしくはモックアップ)を見て、その段階でディレクターが何を「確認」すればいいのか?という内容についてです。 もちろん経験を積む。もしくは自分自身でデザイナーも経験するなどの機会に恵まれれば大丈夫なんですが、僕みたいに「いきなりWebディレクターという肩書きを与えられてしまった人」は、デザインの何を確認すれば良いのか分からなくなってしまうケースも多いんじゃないかな?と思って書いてみました。 実際にはマークアップ後まで影響してくるので、もっともっと項目は伸びると思うのですが、ひとまず僕が注意して見ているポイントを10個ピックしています。 色数を使いすぎていないか あれもこれも!と欲張りすぎて、結局なにが「一番強調したいのか」が分からなくなってしまっている

    ディレクターが指摘すべきデザインの注意ポイント10個
  • Conol,Inc

    NEWS 株式会社コノルからのお知らせやプレスリリースなど 2024/02/19 CUONA 第52回国際ホテル・レストラン・ショー2024ご来場ありがとうございました 2024/01/25 CUONA Favorでの決済方法にPayPayが利用できるようになります 2024/01/09 CUONA Clue GATEに新しいシリーズ002Sが登場しました 2023/09/30 CUONA NFCを使った通信認証装置およびシステムの特許を取得しました 2023/01/07 CUONA 第51回国際ホテル・レストラン・ショー2023に出展します かざすだけで、あなたもお客さまもシンプルに 世の中にはたくさんの便利なサービスがあります。 しかし、同じ手続きのやり取り、人確認、サービスへの接続など、色々な手間と煩雑さが混在しています。 私たちが開発したCUONAの仕組みであれば、NFC(近距離

    Conol,Inc
    terasuy
    terasuy 2011/03/09
    かわいいデザインだなー
  • レコメガール 復興支援バージョン

    ねぇねぇ、こんな復興支援オークションやってるんだって! 今の入札価格は、{item1}円みたい。 {item1}円 入札残り締切りまで、あと{item2}日かぁ。 残り{item2}日 ねぇ、どぉ思う? 入札してみない? この商品の詳細を見に行く。 今、こんな復興支援やってるんだよ。知ってる? だいたい{item1}円くらいで買えて~。 {item1}円 {item2}ポイントつくんだって。 {item2}ポイント どう?買ってみたくなったぁ? この商品の詳細を見に行く。 Web Services by allcoupon.jp ねぇねぇ、復興支援のクーポンがあってさ。 こんなものなんだけど。 なんと、通常 {item1}円のところを、 {item1}円 今なら、{item2}円なんだって! {item2}円 どぉ?チャンスだよ~。 ねぇ、買おうよ~。 このクーポンの詳細を見に行く。

    terasuy
    terasuy 2010/11/10
    デザイン可愛いんだけど、先鋭的すぎる気も…。
  • Mockingbird has Shut Down

    Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http

  • ホントに助かるフリーのcssジェネレーターいろいろ

    使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日語のテキストで作成できるcssメニュージェネレーターは当に助かります。 Grid Designer 2 細かい設定を行えてすぐに反映されるグリッドシステム。 Grid Designer 2 nP: Grid Generator グリッドを作成すると、cssのソースも出してくれます。 nP: Grid Generator Dynamic 4 Column Layout Generator これ面白い。4カラム専用のレイアウトジェネレーター。設定と同時に反映、 cssもDL(コピペ)出来ます。 Dynamic 4 Column Layout Generator XHTML/CSS Markup Gen

    ホントに助かるフリーのcssジェネレーターいろいろ
  • Introduction : Indexhibit

    Indexhibit is a portfolio cms for everybody.

    terasuy
    terasuy 2010/10/22
    こんなCMSあったんだ
  • Yahoo! Media Player

    A revolutionary and easy to use music player that plays audio on your website. Adds audio to your site with one line of HTML Uses simple, easy-to-hack HTML instead of complicated proprietary markup, ushering in the REAL Media Web Magical floating design never gets lost, is available when you need it, gets out of your way when you don't need it Automatically finds all audio links on your page,

  • ほんとにフリー?というクオリティのXHTML/CSSテンプレート20:phpspot開発日誌

    20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー?というクオリティのXHTML/CSSテンプレート20が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート40種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

  • WebサイトのUIのプロだけどサイトの評価するよ : はれぞう

  • ソシオメディア

    ソシオメディアは各種ビジネス向けデジタルプロダクトのデザイン支援を行うデザインコンサルティング会社です。業界をリードする OOUI(オブジェクト指向ユーザーインターフェース)設計、独自ガイドラインをもとにしたエクスパートレビュー、クリエイティブ組織を構築するデザインマネジメント支援など、様々な角度から御社のデザイン戦略をサポートし、デジタルトランスフォーメーションを実現します。 もっと読む 多くの方からご要望をいただいておりました OOUI メソッドの解説書『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』が、2020年6月5日、技術評論社より遂に出版されました。 オブジェクト指向ユーザーインターフェース(OOUI)とは、オブジェクト(もの、名詞)を起点としてUIを設計すること。タスク(やること、動詞)を起点としたUIに比べて劇的に使いやすくなり、開発効率も向上します。 ブ

    ソシオメディア
  • すーぱーそに子 Super Sonico

    What's New 2024.11.26 そに子グッズを追加しました♪ 「すーぱーそに子 Trio-Try-iT Figureーチャイナドレスver.ー」を追加しました。 グッズ 2024.11.01 2023年のクリスマスイラストがキャンバスアートで登場♪ 「キャンバスアート タータン耳サンタ Ver.」12/20(金)発売決定! “津路参汰”が2023年のクリスマス壁紙用に描き下ろした“すーぱーそに子”がキャンバスアートで登場! 「すーぱーそに子 キャンバスアート タータン耳サンタ Ver.」が、ニトロプラス公式通販(国内/海外向け)で発売されます。 タータンチェックの耳がキュートなサンタ姿のそに子をかわいがってあげてください♪ あわせて、「すーぱーそに子 B2タペストリー バニーガール Ver.」「すーぱーそに子 B2タペストリー セクシーパティシエ Ver.」の再販が決定し

    すーぱーそに子 Super Sonico