Webデザイナーが独学でWebサービスを作って公開するまで │ Design Spice

2015/08/19 135 users 独学 Webデザイナー WEBサービス

以前の投稿で紹介した個人で開発している“Sketというサービスを一般公開しました。 キリがいいのと整理のために、ここまでの経緯をまとめてみました。 作ったサービス 私について 使ってる技術 サービスリリースまで 苦労したこと これから 作ったサービス Sket │スケット Facebookアカウントでの登録をベースとした実名制のクラウドソーシング。 また、一般のクラウドソーシングのような依頼と受注... 続きを読む

画像の作り方・使い方でファイルサイズを減らす方法 │ Design Spice

2014/04/16 116 users 切り口 CSS ファイルサイズ Webフォント 作り方

画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWe... 続きを読む

レスポンシブWebデザインでハマりがちな%指定 │ Design Spice

2014/03/24 452 users レスポンシブWebデザイン 備忘録 %指定 比率 数値

レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×1... 続きを読む

CSS Nite @Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など | Design Color

2013/07/08 111 users Co-Edo デパ デバイス CSS Nite 手法

先日、CSS Nite @Co-Edo, Vol.17「セミハンズオンで学ぶレスポンシブWebデザイン」に参加してきました。講師はブログ「Design Spice」を運営されているヒロさんです。 濃い内容がもりだくさんでしたので、学んだことをアウトプットしておきます！ レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバ... 続きを読む

使えるとレスポンシブWebデザインに便利なCSS │ Design Spice

2013/05/29 209 users CSS レスポンシブWebデザイン

デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; }... 続きを読む

レスポンシブWebデザインのテストに使えるツール │ Design Spice

2013/05/19 284 users レスポンシブWebデザイン ツール

Webサービス Screenqueri.es ブラウザ上で各デバイスのシミュレーションができる。 Responsive Web Design Test Tool ブラウザ上で各デバイスのシミュレーションができる。 responsivepx ブラウザ上でサイズを変更して表示確認ができる。 ish. ブラウザ上で各サイズの表示を確認できる。 Responsive Tools For Web Desig... 続きを読む

柔軟なワークフロー │ Design Spice

2013/05/07 111 users ワークフロー 再考 Web制作フロー Web制作 変化

少し前からWeb制作のワークフローの変化をあちらこちらで聞くようになりました。今まで調べてきたことと経験から学んだことを交えて今の考えをまとめてみました。 Web制作フローの再考とDesigning in the browserを書いた頃からワークフローの変化を意識しており、いろんな記事を読んだり自分なりに考えたりしてます。現在のところ僕が思うのはワークフローはひとつに定められない、ということです... 続きを読む

フリーランスになって一年経って │ Design Spice

2013/04/23 139 users フリーランス

仕事形態をフリーランス一本にしてから4月1日で丸一年経ちました。フリーランス歴の長い諸先輩方は沢山いるのですが、一年目の今だから書けることもあると思うので、一年経った今どんな状況なのかツラツラと書いてみました。項目は順不同です。 今の状況 Webデザイナーと言う肩書きで、デザイン、コーディング、ディレクション案件を受けてます。今のところ9割受託です。受託のみというのは不確定要素が大きく、また”仕事... 続きを読む

無料でMacでIEの表示テストをする方法 │ Design Spice

2013/04/03 460 users Mac 表示テスト 方法 無料

modern.IEでは仮想PCを使用したIEの表示テストツールが提供されてます。これを使用するとWindows以外のOSでも複数バージョンのIEのテストが行えます。 はじめに modern.IEのVirtual toolsページではIEのテストツールが提供されてます。 「Local virtualization」では各OS、各仮想化ソフトウェア用のWindows&IEファイルが用意されてます。OS... 続きを読む

「Webデザイン」とはなにか？ザックリ考えてみた（2013年） │ Design Spice

2013/01/11 194 users 範疇 webデザイン web 去年 毎年恒例

「Webデザイン」について今の自分が考えてることを記録として書きました。去年に続き二回目です。タイトルに2013年が入ってるのは時間と共にwebのあり方や自分の考えも変わっていくからです。 はじめに このテーマを毎年恒例にしようとしてたのですが、早くも2回めで躓きそうになりました…。 「Webデザイン」とはなにか？じっくり考えてみた（2012年） 内容は「Webデザイン」の範疇を超えてるのですが、... 続きを読む

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

2012/11/01 877 users レスポンシブWebデザイン テーブル 小技 table 具合

レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。 tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist... 続きを読む

Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice

2012/09/04 1012 users 解像度 ppi Webサイト制作 dpi ビットマップ画像

スマホやRetinaディスプレイが出てきてから、サイト制作の時に解像度に関することで時々混乱することがあるので整理してみました。 解像度とppiとdpi 解像度はビットマップ画像における画像密度のことで、一般に1インチ(25.4mm)をいくつに分けるかによって数字で表します。 単位はdpi、またはppiを用いられることが多いです。 よくディスプレイの解像度を1024×768ピクセルという総画素数で... 続きを読む

私がWebサイトの配色を決める時の流れ │ Design Spice

2012/07/20 864 users 配色 形容詞 誤差 Webサイト 高級

ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です... 続きを読む

Photoshopで理論的に配色はできないものか検証してみた │ Design Spice

2012/07/09 126 users Photoshop 配色 ジェネレータ 色相 動機

最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った... 続きを読む

Web制作フローの再考とDesigning in the browser │ Design Spice

2012/06/29 464 users 再考 Designing in the browser

多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフ... 続きを読む

» レスポンシブWebデザインの画像問題の解決法5種│Design Spice

2012/06/13 974 users レスポンシブWebデザイン jQuery 画像問題 回線速度

レスポンシブWebデザインの問題の一つに、PCと同じ画像を回線速度の低いモバイルデバイスでも表示させるのか、といった点が挙げられます。そこでこの問題に対する解決策を調べてみました。 Javascriptを使う Javascript（jQuery）を使う方法です。 幾つもの手法が発表されてますが動作も様々です。 Responsive-Images Responsive Images 最初に小さい画像... 続きを読む

レスポンシブWebデザインのブレークポイント調査 | Design Spice

2012/05/17 132 users レスポンシブWebデザイン

iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されま... 続きを読む

Appleが推奨するSkeuomorphic Designとそのメリットデメリット | Design Spice

2012/04/06 163 users Apple メリットデメリット 質感 モチーフ アプリ

最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI)と呼ぶそうです。 このSkeuomorphic Designについて書いてみました。 Skeuomorphic Designとは まずskeuomorphという言葉から。 skeuomorp... 続きを読む

無料のベクター素材を提供しているサイト40選 | Design Spice

2012/02/24 561 users ベクター素材 Photoshop 無料 手間 整理

先日の無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45に続き、 ベクター素材を提供しているサイトのまとめです。 やはり個人的な整理のためのまとめですが共有します。 はじめに 全てを網羅するのは逆に手間だと思うので、 この中から自分のお気に入りや使いやすいサイトを選んでそれを中心に利用することになると思います。 また、サイトによってはphotoshopの素材とベ... 続きを読む

知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト | Design Spice

2011/11/02 758 users jQuery Mobile 知識 本家本元 サイト制作 制作

このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ... 続きを読む

レスポンシブwebデザインで制作する時のポイント | Design Spice

2011/09/22 917 users レスポンシブWebデザイン Dreamweaver 復習

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つ... 続きを読む

Web制作者は知っておきたいwebサイトのレイアウト7選 | Design Spice

2011/08/31 1751 users Webサイト WEB制作者

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを... 続きを読む

私がwebサイトのラフデザインを制作する時の流れ | Design Spice

2011/06/23 1592 users ラフデザイン 独学 ターゲット Webサイト コンセプト

私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デ... 続きを読む