スタートアップの成長とそれに伴うデザイナー組織の変遷 │ Design Spice

2018/01/30 26 users 変遷 ペライチ フリーランス デザイナー組織 殆ど

ペライチ に参加した当初、私はフリーランスとして働いていたので業務委託として関わり始めました。 それまでにスタートアップで働いた経験はなく、またチーム開発の経験も殆どなかったので、サービス開発の手法や、チームでの開発などを学びながら手を動かしていました。 私の入る少し前に今までペライチに関わっていたデザイナーが抜けてしまったので、この時期はメインで働くデザイナーは私１人で、他にスポットで手伝ってく... 続きを読む

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

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

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

仕事を協力し合える仲間を探すサービスを作りました │ Design Spice

2014/10/08 59 users 仲間 Sket 仕事 サービス 受託

フリーランス同士で協力することをメインの目的としたSketというサービスをリリースしました。依頼→受託の縦の関係よりは、横の関係を重視してます。 Sket 現在はベータ版で招待制となります。既に登録済みのユーザーは招待状を発行することができますので、周りに使ってるユーザーがいたら聞いてみてください。 あとは、ニュースレターにメールアドレス登録しておいていただけると今後のお知らせを受け取ることができ... 続きを読む

画像の作り方・使い方でファイルサイズを減らす方法 │ 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... 続きを読む

フリーランスになりました | Design Spice

2012/04/02 27 users フリーランス 屋号 去年 派遣 フリー

3月31日で派遣の仕事を辞めて、4月1日より完全にフリーランス一本にしました。 ご挨拶 4月1日より完全にフリーランスになりました。 正確には去年からフリーとして活動はしてたのですが、 3月までは派遣と並行しており、4月からはフリーランス一本になります。 屋号はツクリベ(TSUKURIBE)です。 いちクリエイターであり続けたいという思いからです。 TSUKURIBE 数ヶ月は仕事がない可能性も考... 続きを読む

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

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

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

twitter APIとjQueryでtwitter widgetを作成する | Design Spice

2012/02/16 44 users Twitter jQuery Widget API リプライ

twitterのwidgetのデザインをカスタマイズしたいのと、 リプライを表示させたくないと言う理由から twitter APIとjQueryを使ってオリジナルのwidegetを 作成しました。 当ブログでは殆どデザインしてませんが、 公式のwidgetに近いデザインにする場合の制作方法を書きました。 サンプル ベースはA jQuery Twitter Ticker | Tutorialzine... 続きを読む

Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX | Design Spice

2012/02/07 46 users Evernote クリエイティブディレクター ブランド

先日Evernote クリエイティブディレクター Gabe氏によるデザイントーク「シリコンバレー流UI/UX/Brand Development」に参加してきました。 普段聞くことのできない貴重な話が聞けました。 始めに このエントリーはセミナーで取ったメモを元に僕なりにまとめています。 Gabe Campodonico氏の発言の詳細は安藤日記さんがまとめられてたのでそちらをご覧ください。 安藤日... 続きを読む

「Webデザイン」とはなにか？じっくり考えてみた（2012年） | Design Spice

2012/01/04 43 users 正解 web 後半 タイトル 意見

年末年始は何かと振り返ったり考えたりするものです。 昨年後半から「webデザイン」について考えており、 自分なりに出した考えを書いてみます。 またタイトルに2012年を入れたのは 時間と共にwebのあり方や自分の考えも変わってくるので、 "今現在の考え"であることを示すために入れてます。 はじめに この記事は僕の考え方であって、それが正解とは思いませんし異なる意見があって当然だと思います。 そのく... 続きを読む