「エンジニア病」を抱えたあなたに効く「デザインの考え方」 ～ソニックガーデン・デザインメンター対談のまとめ～ - give IT a try
はじめに 先日、僕が勤務しているソニックガーデンのブログ記事で、弊社プログラマとデザイナーさんの対談記事が公開されました。 【前編】エンジニアの会社でデザインがうまくいくワケ〜「エンジニア病」にはダメ出しされよう 【中編】プログラミングとデザイン、やっていることはわりと同じ〜「デザインは感覚じゃない」 【後編】デザインできるプログラマの育てかた〜「デザインメンター制度」のキモは理由で納得！ インタビューに登場する町田さん（@machida）と赤塚さん（@ken_c_lo）は僕もよく知っているとても素晴らしいデザイナーさんです。 素敵なデザインができるのはもちろん、HamlやSassなどプログラマ寄りの技術知識も豊富に持ち合わせていますし、物腰も柔らかくてとても相談しやすい方たちです。 業界の各方面から引っ張りだこなのも十分頷けます。 ところで、上の記事の中に出てくる「デザインメンター制度」
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
最近話題になったイケてるWebサービス・アプリ14選（2014年8月編）
こんにちは。 9月が始まりましたので、8月中に話題になったWebサービスやアプリを14個ほどご紹介します。 Hyperlapse Instagramが提供する、タイムラプス（微速度動画）動画を撮影できるアプリです。 強力な手ぶれ補正が特徴的で、手で持ったまま撮影するとぶれてしまう移動中のタイムラプス動画もスムーズに撮影できます。 Instagramでシェアできる動画の長さは15秒までとなっています。 動画をみればわかりますが、飛行機や車からの景色を撮影し、コマ数を減らして長時間の映像を短縮して記録させているためスピード感のある映像に仕上がります。 FESS（フェス） FESSは、iPhone向け音楽共有アプリです。 複数人のiPhoneに入っている音楽を、1台のiPhoneで共有して音楽を楽しむというアイデア。 アプリを起動して、1人が新しい「FESS（親機）」を作り、他のiPhoneが「
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 | BLOG ROOM9（ブログルームナイン）
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 2014 7/10 WordPressガッツリ使い倒すぞー！ PHP、HTML、CSS超勉強するぞー！ で、まず何したらいいの！？ なんて方はかなり多いかと思います。というか僕がそうでした。そんなワケで今回は Web制作ど素人だけどWordPressのサイト構築をバリバリできるようになりたい！ ブログ書くだけじゃなくテーマをゴリッとカスタマイズできるようになりたい！ こんな方々に超オススメの国内有名ブログを18個紹介させていただきます。Web制作のスキルというとデザインだったり、集客だったり色んな要素が考えられますが、今回は 構築、及びコーディング つまりサイトを”作る”という点で特に参考になるブログのまとめです。 構築・コーディングとは言ってもWeb制作の括りではかなり基礎的なレベルから勉強
スマートフォンのコンバージョン率を上げる秘策 from Conversion Conference Boston 2013
[対象: 中〜上級] 僕が所属するセルフデザイン・ホールディングスの海外遠征の一環で、昨年の秋に米ボストンで開催されたConversion Conference Boston 2013に参加しました。 僕が海外カンファレンスに参加したときはセッションレポートをこのブログで公開するのが通常です。 ところがConversion Conference Boston 2013に関しては、帰国後予想以上に忙しかったせいもありレポートをまとめる時間がとれませんでした。 時間がたちましたが、ようやくまとめることができたのでセッションレポートを公開します。 この記事でとりあげるセッションはモバイルサイトのコンバージョン率を上げるための秘策です。 スピーカーは、SeeWhyの創設者、Charles Nicholls（チャールズ・ニコルズ）氏です。 では行ってみましょう。 モバイルにおけるコンバージョンの問題
本気でAndroid用のアイコンを作る
この記事はAndroidAdvent Calendarのエントリーです。 はじめにAndroidが国内に出回って5年が経ちました。 当初の標準アイコンのままアプリがAndroid Marketに公開されるような状態は落ち着き、時代とともにデザインも洗練され一定の秩序が見られるようになってきました。 しかし、未だにデザイン面を考察した形跡が見えないアプリも少なくありません。 スマートフォンは多数のアプリを使うため、ルールに基づいたプラットフォームで一貫性のあるデザインを土台にするのが操作性の良さにつながります。 独自性を出すためや新たな操作性を開拓するためにあえてルールを守らないと言う事もありますが、まずはデザインルールを知りその上で設計することが大原則になります。 ランチャーアイコンアプリデザインについて語る上でランチャーアイコンから入らない訳には行きません。 ランチャーアイコンはアプリの
誰でも何でも売買できる「LINE MALL」が始動、事前審査や月額費用なし
LINEは、スマートフォン向けのECサービス「LINE MALL」をAndroid版アプリ先行で公開した。2014年早々にiPhoneにも対応し、春頃予定のグランドオープンに合わせ企業からの本格的な出品も受け付けるという。 誰もが手軽に取引できるプラットフォーム LINE MALLでは、アプリを通じて出品・購入・支払いなどの手順をサポートし、商品の売買がスマホ内だけで完結する。事前審査などはなく（企業による出品は必要な場合もある）、スマホで撮影した写真を利用し、販売価格を設定、出品ボタンを押すだけの3ステップで手軽に出品できるのが特長だ。 LINE MALLの利用にはLINE認証と専用のMALL ID作成が必要となるが、それだけではLINEの友だちとはつながらず、匿名での出品や商品購入もできる。一方で、自分が出品した商品や気に入った商品を、LINEを通じて友だちにシェアすることも可能となっ
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。 設置方法 > DEMO > DOWLOAD 設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。 プラグインのダウンロードは本家サイトより行えます。 対応ブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+ 読み込
CSS Buttons with Pseudo-elements | Codrops
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tuto
Radar Icon in Pixelmator
A few weeks ago I showed you how to create a Mac style icon using Photoshop. It was a radar one inspired by the Network Utility icon. As I like to play with all tools I decided to give it a try in Pixelmator as well. So, in this tutorial I will show you how to create a beautiful Mac style icon using Pixelmator. I will show you how to create some bevels and light effects that are very characteristi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
和文フリーフォントの最上位でしょ！グーグルとAdobeが作った「源の角ゴシック」をゲットすべし * prasm（プラズム）
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
Grad3
Ultimate CSS Gradient Generator from ColorZilla
角丸やシャドウ作るジェネレータ。CSS3 Generator