リソースの一部更新におけるURL設計 - Qiita
概要 Webアプリケーションにて、リソースの一部更新を行う際、どのようにURL設計を行うとシンプルで美しいか（本当はそこまで考えていなかったけど）悩んでいたところ、 @t_wada さんから素敵な設計指針をご教示いただきました。 本記事はその内容に加えて、実際に自分で行ったこと、調べたこと、思った事など、まとめております。 あらすじ 数週間前にSIピラミッドからヒモなしバンジーを決めてWebの世界に飛び込んだ私は、小さな小さなWebアプリケーションをrails newから手探りで作っていました。 そんなとき、簡単なリソースの一部更新機能をどう実装したもんかなーと悩んでました。以下、当時（といっても先週）の超雑なぼやき。 リンクをクリックしてモデルの一部を変更するのはどうしたらいいんだろう。 例）不参加をクリック -> 某カラムをtrueからfalseへ リクエストオブジェクトに対象カラムの
15 Flat Powerpoint Presentation Templates – Bashooka
To get ahead in your career or business, you’ll need excellent presentation skills. After all, it is through presentations that you communicate with your team, staff, business partners or customers. Whether you are a student, freelancer or someone who needs to present a presentation at the workplace, here are 15 visually engaging flat PowerPoint templates that will keep your audience mesmerized an
【わかりやすく解説】UXデザインの基本と主要概念 デザイン会社 ビートラックス: ブログ
そもそもUXとは？なぜUXデザインが必要なのか？UXとUIの関係性UXデザインが目指すべきところUXが重要であることは、近年の議論からすでに認識されている方も多いことだろう。 しかし、UXデザインの定義や位置付けはとても曖昧で、人によって捉え方は様々なのではないだろうか。 筆者自身、これまでのプロジェクトを通して様々なバックグラウンドを持った人がUXという言葉を使っているのを目の当たりにし、その度に認識のズレを感じている。 結論から話すと、UXデザインについて定義することよりも、この言葉が世間でどのような使われ方をしているのかを知ることのほうが重要である。 今回は弊社の提供するイノベーションプログラムやデザインプロジェクトを通して蓄積した経験から「UXとは何か」といった捉え方や基本的な概念部分、そして「なぜUXを考える必要があるのか？」にフォーカスし、いくつかの観点をまとめて紹介する。 一
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょうか。（特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ！） それで今回はＬＰやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ - コムテブログ
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 １．アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
MMORPGで考えるゲームデザイン（2014年改訂版）
（株）Aimingの社内勉強会のスピーチで使用したスライドです。公開に当たって画像を削除しております。ご了承ください。 ・目次 1 MMORPGの成立 Ultima Online、Ever QuestからWoWまで、MMORPGの成立とゲームシステムの変遷 2 行動のデザイン プレイヤーの動線で考える→システムとコンテンツの配置 時間軸で考える→ゲームの成長曲線 成長スピードの緩急／プレイタイムからの逆算 3 今日的なMMORPGの形（←2014年版追加） 今日のスマホのゲームでMMORPGのデザインがどのように生かされているか ・概要 ネイティブアプリのリッチ化や、「剣と魔法のログレス」などのヒットにより、MMORPGや常時接続型のオンラインゲームが再び今日的なテーマとして脚光を浴びています。 そこで、オンラインのゲームデザインのエッセンスが詰まったMMORPGというジャンルを分解し、そ
『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
DummyImage.com
by Russell Heimlich (@kingkool68) 600x400/000/fffSize / Background Color / Foreground Color . Format & Text DocumentationSizewidth x height Height is optional, if no height is specified the image will be a square. Example: https://dummyimage.com/300Must be the first option in the urlYou can specify one dimension and a ratio and dummyimage will calculate the right value. Example: https://dummyimage
背景や文字・グラフィックに重ねて上質な質感を与える紙や木の無料のテクスチャ素材
そのまま背景に使ってもよし、文字やグラフィックに重ねてもいい感じに仕上がる、センスのよい上質な質感を与える紙や木のテクスチャ素材を紹介します。 まずは、紙のテクスチャ素材から。
Webデザイナー、コーダーならDLしとこう！あると地味に便利なGoogleChrome機能拡張4つ
今日は業務でよく使う、Webデザイナー・コーダーさんならあると地味に便利なGoogleChrome機能拡張をまとめてみました。私にとって、どのエクステンションも無いと「ちょっと困る」ものたちばかりです。 Image Properties Context Menu まずはImage Properties Context Menu。 画像を右クリックすると、パスやサイズ、altテキスト、ファイルサイズ等を別ウインドウで表示してくれます。 参考：[Google Chrome]右クリックで画像のプロパティを簡単に確認できるエクステンション「Image Properties Context Menu」 MeasureIt! 続いてはMeasureIt。 ブラウザ上に「ものさし」を表示してくれるエクステンション。ささっと画像サイズを調べたり、カラムの幅を測ったりするのに使用しています。 Show Ti
新しいiOS 7のウェブデザインのための3つのポイント
本記事は、アップルの製品に最適化する上で注目すべき、iOS 7のSafariにおいて3つの重要なUX/UIへの変更点を、カナダのMobify社のマイク・アバソヴと、(株)ドーモの大賀匠竜からレポートします。 世界中の全モバイルページビューの内56.5%を生み出しているのがiOSです。その新バージョンには、さまざまな素晴らしい機能やデザインの向上が用意されています。最も大きな変更点は、「モバイルSafari」です。これらの変更点は、単にフラットデザインを採用しただけではなく、ユーザビリティに大きく影響が出る機能面での重要な変更があります。 1. フリックの扱いを慎重にする これまでのSafariでは、スクリーンの上端から下に向かってスワイプすることでNotification Centreを引き出すことができました。しかし、iOS 7ではデバイスの4辺がすべてが
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
ke-tai.org > Blog Archive > スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」
スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」 Tweet 2012/2/29 水曜日 matsui Posted in Android, iPhone, デザイン | 1 Comment » お仕事でもお付き合いのあるAimingさんの社内勉強会資料で、興味深いスライドが公開されていたのでご紹介します。 企画が考えるスマホUIデザイン View more presentations from onoremiz 制限の多いスマートフォン向けゲームのUIを、企画側からの視点でまとめあげた、89ページもある大作スライドです。 具体的な例を示すというよりは、概念や方向性を示すという内容になっています。 スマホゲームを作っている方は、必見の資料になっていると思いますので、チェックしてみてはいかがでしょうか。 関連： ドリコムの負荷対策の
フラットデザイン｜Flat UI Colors
280 handpicked colors ready for COPY & PASTE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンCSS設計の解説サイトまとめ - Qiita
Webデザイン – Stocker.jp/diary
最近流行りの凹みデザインを、CSSだけでやってみた。 « arikou's Blog