サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
アメリカ大統領選
design-spice.com
関わっている現場の一つで、デザインツールをAdobe XDからFigmaに移行しました。その時に今までFigmaを使ったことのないメンバー向けにFigma勉強会などを開催し、すぐに使い始められるようサポートをしました。 その経験の中で、これからFigmaを使い始めるXDユーザーが理解に時間がかかる点や躓くところをまとめてみました。 ファイル構造と管理構造 XDは1つのXDファイルの中にアートボードで各種画面を作成します。またCreative Cloudのグループ版およびエンタープライズ版ではチーム内でXDファイルを共有できます。 Figmaファイル内の構造 Figmaは1つのFigmaファイルの中に、pageという階層があります。pageの中にFrameで各種画面を作成します。 Figmaアカウントのファイル管理構造 Figmaでは1アカウントごとにDraftとTeamがあり、それらの配下
AppleScriptを使うと、いつも行う操作や処理などを自動化できるのでとても便利です。本記事ではAppleScriptを簡単に紹介します。 はじめに AppleScriptとは、アップルが開発したmacOS用のオブジェクト指向のスクリプト言語で、システムや様々な対応アプリケーションを制御できます。 このAppleScriptを使うことで、いつも行う操作や処理などを自動化できます。 例えば。私はフリーランスで複数のプロジェクトに関わっています。当然、プロジェクトごとに環境は異なりますので、稼働日に応じて現在立ち上がってる環境を落として、新しい環境を立ち上げる、ということを繰り返してたのですが、これが毎回となると結構な手間です。 そこで、AppleScriptを使って、環境の切り替えを自動化しました。 上の動画では、AppleScriptで下記の作業を自動化してます。 iTermを立ち上げ
Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 ちなみに学び始める前の私のスキルは下記の通りです。 JavaScriptの基本的な理解はあるjQueryは仕事で使えるレベルReactは全く使ったことがない 注意 Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。(私もまだちゃんと理解はしてない。。) ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そち
HTMLメールとは その名の通り、HTMLタグを使って作成されたメールです。テキストで作成されたメールと違って、テキストのサイズや色を変えたり、画像を配置させたりと、リッチな表現が可能となります。また解析タグも埋め込めるので開封率やトラッキングなどのデータ取得も可能です。 数年前までは海外のwebサービスのメールなどで目にすることが多かったですが、最近では国内のメールでもHTMLメールが使われるケースが増えてきました。 参考 国内企業の40%以上がHTMLメールを利用 | EC業界ニュース・まとめ・コラム「eコマースコンバージョンラボ」 HTMLメールの作成方法 メールを表示するメールクライアントの種類は多種多様であり、対応しているタグの種類もバラバラです。 Campaign MonitorやMail Chimpが主要なメールクライアントがサポートしているCSSを公開しています。 CSS
ペライチに参加した当初、私はフリーランスとして働いていたので業務委託として関わり始めました。 それまでにスタートアップで働いた経験はなく、またチーム開発の経験も殆どなかったので、サービス開発の手法や、チームでの開発などを学びながら手を動かしていました。 私の入る少し前に今までペライチに関わっていたデザイナーが抜けてしまったので、この時期はメインで働くデザイナーは私1人で、他にスポットで手伝ってくれるフリーランスのデザイナーの方が数人いました。 とにかく人手が足りないので、デザイナーという枠組みでしたができることは何でもやりました。 プロダクトのUI、サービスのwebページ作成、ペライチテンプレートの作成、印刷物・ノベルティの作成といった一般的なデザイン業務の範疇はもちろん、JavaScriptなども書いて小さな機能実装もしていました。明確なプロジェクトという単位はなく、デザインや開発は個々
私が携わっているサービス「ペライチ」のロゴをリデザインしました。 今回のロゴができあがるまでの流れをまとめてみました。 背景 現在、私の勤めている会社は、誰でも簡単にwebページが作成できる「ペライチ」というサービスを開発、運営しています。会社の社名は株式会社ホットスタートアップでしたが、2017年の5月25日に株式会社ペライチに変えました。これは「ペライチ」というサービスが認知されてきたこと、社名をサービス名と同じにすることで今まで以上にこのサービスに全力を注ぐという決意の現れでもあります。 この社名変更を機にロゴも刷新することになり、デザイナーの私がこのプロジェクトに任命されました。 競合調査 始めに競合のロゴ調査から始めました。他社のロゴのイメージやどんなモチーフを使ってるかを調べたり、業種別・ロゴのテイスト別にポジショニングマップなどを作成し、その中でペライチのロゴが目指す方向を定
厳しくても評価される環境に飛び込むことで 判断する力、考える力をもう一段階引き上げていこうと心に決めた。 今、僕は会社に勤めながらアートディレクター講座という講座を受講している。その講座には不定期で課題があり、成果物を現場の第一線で活躍してるアートディレクターが評価してくれる。 先日初めてその課題発表があったのだが、僕は仕事が忙しかったのを言い訳に自分の中でこれくらいでいいだろうというレベルで作品を仕上げて発表した。 その結果は散々たるものだった。 完璧なレベルで仕上げなかったことを見透かされ、勉強が足りないことを指摘された。はっきり言われたわけではないが、成果物を評価されるレベルにも達してない、そう判断された気がした。 全くもってその通りだし、悪い評価されることは覚悟していたのだが、思ってた以上にへこまされた。 この程度の成果物でいいと思ってしまった自分に対し情けない気持ちと、自分の成果
CakePHPのFormヘルパーに二次元配列を渡してチェックボックスを出力した時のメモです。 モデリング 親カテゴリ(CategoryParent)、子カテゴリ(Category)それぞれテーブルに分かれてて、親カテゴリが子カテゴリにhasManyでアソシエーションしてると仮定します。 Controller $catagory_options = $this->Category->find( 'list', array( 'fields' => array('Category.id', 'Category.category', 'CategoryParent.skill') )); Controllerの処理で下記の配列が返ってきます。 array( '親カテゴリhoge' => array( (int) 2 => 'ajax', (int) 6 => 'backbone.js', (in
photoshopのブラシは簡単に表現の幅が広がるので非常に便利ですが、たくさんのブラシを保持してると使いたいブラシがどれであるか探すのに時間がかかる場合があります。photoshopのブラシを管理する方法を幾つか紹介しますので、参考になれば嬉しいです。 photoshopのブラシは簡単に表現の幅が広がるので非常に便利です。 最近では種類も豊富にありますが、たくさんのブラシを保持してると使いたいブラシがどれであるか 探すのに時間がかかる場合があります。 photoshopのブラシを管理する方法を幾つか紹介しますので、参考になれば嬉しいです。 フォルダで分ける方法 オーソドックスな方法だと思います。 ブラシをカテゴリ毎にフォルダに分けて管理します。 ファイル名を変える方法 .abrのファイル名からではどんなブラシか予測しにくい場合もあるので、 分かりやすい名前に変えます。 ファイル名を変えて
以前の投稿で紹介した個人で開発している“Sketというサービスを一般公開しました。 キリがいいのと整理のために、ここまでの経緯をまとめてみました。 作ったサービス Sket │スケット Facebookアカウントでの登録をベースとした実名制のクラウドソーシング。 また、一般のクラウドソーシングのような依頼と受注の「クライアントと制作者」という関係性だけでなく、フリーランスの方が自分に足りないリソースを補うために協力者を探す「制作者と制作者」の関係で利用できるのも特徴のひとつです。 私について フリーランスのWebデザイナーとしてWebのデザインからコーディングまでをメインに受託をしています。プログラムは過去に一度学んだことはありますが実務で使った経験はなし。 使ってる技術 PHP MySQL CakePHP Sass Grunt jQuery Bootstrap VPS Nginx Git
スタイルガイドジェネレータ SC5 styleguideをざっと使ってみました。 SC5 Styleguide SC5 styleguideはKSSをベースにしており、UIにはAngularJSを使っています。CSSだけでなくSassやLESSにも対応しています。 その他SC5 styleguideには次のような機能があります。 ローカルサーバーを起動し監視してスタイルガイドがライブリロードされる スタイルガイドの表示画面からCSSや、Sass、LESSの変数などを編集できる 一箇所に現在のコンポーネントと関連したスタイルと変数がまとめられる インストール npm経由でインストールできます。 npm install -g sc5-styleguide 例 styleguide -s css/style.css -o sc5 コンパイル プロジェクトディレクトリに移動して、下記のコマンドでコ
HTML <ul id="nav"> <li><a href="#section01">menu</a></li> <li><a href="#section02">menu</a></li> <li><a href="#section03">menu</a></li> </ul> </div> <div class="section" id="section01"> ..... </div> <div class="section" id="section02"> ..... </div> <div class="section" id="section03"> ..... </div> CSS body{ padding-top: 100px; } #nav{ position: fixed; top: 0; left: 0; width: 100%; } #nav ul{ overf
先日、執筆に携わった「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 」が発売されました。著者の立場から内容と言うよりは思っていることをつらつらと。 先日、執筆に携わった「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4」が発売されました。 本書は、大竹さん、中江さん、ギンペイさんと僕の4名での共著となります。企画は株式会社まぼろし様、出版はMdN様です。 他の著者の皆さんは個人的にも実力のある方と思っており、ひとりひとりが得意とする部分で力を発揮してますので有用な内容に仕上がったかと思います。 »現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 本書の構成 本書のタイトルに「HTML+CSSコーディング」とありますが、基本的なHTML+C
Approaches to Media Queries in Sass | CSS-Tricksで、Sassを使ったメディアクエリのアプローチが紹介されてました。 詳しくは原文を見てもらえればなのですが、単純に幅とかの数値を渡す方法だけならそれなりにいいやり方あるのだけど、メディアタイプとかと併用するとベストな方法がないと。 でいろいろ試した結果、辿り着いたSassが紹介されてます。 そのSassはこちらから入手できます。 eduardoboucas/include-media 使い方 @mixin media()に引数を渡します。 引数は不等号とデバイス名を組み合わせて指定します。 “>=phone”と書くとスマートフォン以上のサイズで、という意味になります。 /* sass */ @include media(">=phone", "<tablet") { } @include med
フリーランス同士で協力することをメインの目的としたSketというサービスをリリースしました。依頼→受託の縦の関係よりは、横の関係を重視してます。 Sket 現在はベータ版で招待制となります。既に登録済みのユーザーは招待状を発行することができますので、周りに使ってるユーザーがいたら聞いてみてください。 あとは、ニュースレターにメールアドレス登録しておいていただけると今後のお知らせを受け取ることができます。(招待制を無くすかどうかはまだ未定です) 興味ありましたら登録しておいていただけると嬉しいです。 どんなサービスか フリーランスの方が、自分のリソース以上の仕事の依頼があった時に協力してもらえる方を探したり、専門分野以外の仕事をお願いできる方を探すためのサービスです。 僕自身がフリーランスとして数年やってきた中で、「こういうサービスがあったら便利なのに」と、考えていたものを形にしました。 な
とある経緯でAvocodeのベータ版への招待を頂きましたので、ひと通り使ってみてレビュー書きました。若干チュートリアルっぽくなってますが… どんなツール? デザイナーが作成したPohotoshop(またはSketch)のデザインファイルからCSSの取得や書き出しを簡単に行えるツールです。編集などは一切行えません。 フロントエンドエンジニア向けのツールとなります。 Avocode 使い方 ファイルの読み込み ベータ版ではPhotoshopファイルからの読み込みしか対応してません。またサンプルが幾つか用意されてます。正式版ではDropboxや(おそらくCDNも)を使ってファイルを共有することができるようになりそうです。 「Sync new design」以下の「Photoshop Plugin}ボタンからPhotoshopのPluginがダウンロードできます。ダウンロードしたら有効にしておきま
さくらインターネットは、標準の状態ではphpのエラーを出力しません。 開発やphpを使用したサイト構築してると、少し不便だったりします。 先日もwordpressの管理画面が真っ白になり、原因が分からず困りました。 (結局、原因は読み込む関数が見つからないとの事だったので、ファイルを再アップして解決しました。 何故、該当関数が無くなったかは不明です・・・) なのでphp.iniの設定を編集し、phpのエラーログを出力するようにしました。 php.iniを編集しログを出力 さくらインターネットではコントロールパネルからphp.iniを編集出来ます。 コントロールパネルにログインし、 アプリケーションの設定→PHP設定の編集 「php.ini 設定ファイル編集」に下記のように記入します。 display_errors=Off error_reporting="2047" log_errors=
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合
「現場のプロが教えるWeb制作の最新常識」 Kindleリクエストをポチって電子書籍版を待っていたのですが、その前に献本いただきました。ありがとうございます。 ちなみにKindleの販売も始まっているそうです。 内容について 本書は大きく4つの章に分かれてます。 第1章:デザイン・レイアウト・グラフィック 第2章:マルチデバイス対応 第3章:HTML&CSS&JS 第4章:サイト構築・管理・運用 ざっと各章について。 「第1章:デザイン・レイアウト・グラフィック」は現在のトレンドを交えながらデザインやレイアウトに付いての解説です。ここ最近のトレンドを掴むのに良いです。 フラットデザインの注意点 「第2章:マルチデバイス対応」でひとつの章が割かれるのは、まさに現在のマルチデバイス社会を表してると言えるでしょう。マルチデバイス対応の考え方、ワークフローから制作手法までが書かれてます。 モックア
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
「Web」について今の自分が考えてることを記録として書いてます。去年に続き三回目です。タイトルに2014年が入ってるのは時間と共にWebのあり方や自分の考えも変わっていくからです。 はじめに 毎年恒例の記事三年目です。 「Webデザイン」とはなにか?じっくり考えてみた(2012年) 「Webデザイン」とはなにか?ザックリ考えてみた(2013年) 今年の内容は「Webデザイン」に収まらないのでタイトルを少し変えました。 更にwebの範疇を超えて”インターネット”に該当するであろう部分まで触れてますが、切り離して考えられないので”インターネット”も含めて考えています。 この記事は2013年の総括や2014年のトレンドではなく、Webについて今の自分が思ってることをつらつらと書いてます。異なる意見があって当然だと思ってますし、正解を出したい訳でもありません。 自分の考えを整理するため、そして読ん
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
レスポンシブWebデザイン使えるCSSフレームワークとグリッドシステムをまとめました。※随時更新中です Bootstrap 様々なコンポーネントも揃った高機能フレームワーク。Customizeから必要なファイルのみ選択してダウンロードもできますが、gitからはless形式で提供されてるのでこちらを使用したほうがよりカスタマイズがしやすいです。 Foundation 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gemでSass形式のものをダウンロードしたほうがカスタマイズしやすいです。 Gumby 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gitでcloneするとSass形式が入手できるので、そちらのほうがカスタマイズしやすいです。 GroundworkCSS 様々なコン
Webサービス Screenqueri.es ブラウザ上で各デバイスのシミュレーションができる。 Responsive Web Design Test Tool ブラウザ上で各デバイスのシミュレーションができる。 responsivepx ブラウザ上でサイズを変更して表示確認ができる。 ish. ブラウザ上で各サイズの表示を確認できる。 Responsive Tools For Web Designer & Developers 各デバイスの表示が確認できる。操作も可能。 Responsive Roulette ブラウザ上で各サイズの表示を確認できる。 The Responsinator 各デバイスの表示が確認できる。 Juice’r 各デバイスの表示が確認できる。操作も可能。 Screenfly 各デバイスの表示が確認できる。操作も可能。 Responsive Design Testin
少し前からWeb制作のワークフローの変化をあちらこちらで聞くようになりました。今まで調べてきたことと経験から学んだことを交えて今の考えをまとめてみました。 Web制作フローの再考とDesigning in the browserを書いた頃からワークフローの変化を意識しており、いろんな記事を読んだり自分なりに考えたりしてます。現在のところ僕が思うのはワークフローはひとつに定められない、ということです。 関わるチームや環境、制作するサイトによって最適なワークフローは変わってきます。例えばオーソドックスな静的なサイト制作とJS、CSS3など比較的新しい技術を駆使したサイト制作、レスポンシブWebデザインの場合ではワークフローは変わります。今までのサイト制作はワークフローが一様でも問題となることが少なかったですが、そうではなくなってきています。 複雑な設計のサイトではプロトタイプなどを用いて早期に
仕事形態をフリーランス一本にしてから4月1日で丸一年経ちました。フリーランス歴の長い諸先輩方は沢山いるのですが、一年目の今だから書けることもあると思うので、一年経った今どんな状況なのかツラツラと書いてみました。項目は順不同です。 今の状況 Webデザイナーと言う肩書きで、デザイン、コーディング、ディレクション案件を受けてます。今のところ9割受託です。受託のみというのは不確定要素が大きく、また”仕事を受ける”立場上、自由度も制限されます。この先は今の体制を変えてくつもりですが、取り敢えず最初の一年は予定通りです。まだ今後の展開がハッキリ定まってなかったので、後々動きが取りやすいようにスポット的な案件のみとしていました。 仕事の依頼元 勤めてた職場から 知人から Webサイトから 収入源、つまり仕事の流入元は複数ある状態を意識してます。 何社か転職しましたが、円満退職でしたのでそこから仕事の依
modern.IEでは仮想PCを使用したIEの表示テストツールが提供されてます。これを使用するとWindows以外のOSでも複数バージョンのIEのテストが行えます。 追記:modern.IEの日本語版ページが開設されました。 ホーム | Internet Explorer の検証がより簡単に | modern.IE はじめに modern.IEのVirtual toolsページではIEのテストツールが提供されてます。 「Local virtualization」では各OS、各仮想化ソフトウェア用のWindows&IEファイルが用意されてます。OSはWindows、Mac、Linux、仮想化ソフトウェアはVirtualBox、VMWare Fusion、Parallels、Virtual PCなどに対応しています。 ここではMacでVirtualBoxを使用してIEを起動させる方法を紹介しま
この度「マイナビ」から初の著者となる「レスポンシブWebデザイン入門」を出版させていただきます。本書について簡単に紹介します。 はじめに 本書はレスポンシブWebデザインという言葉は知っているが実際にレスポンシブWebデザインの制作したことがない方や、まだ経験が浅い方をターゲットにしています。 レスポンシブWebデザインの概要から、制作方法、制作の流れまでをおさえてます。サンプルを多く収録しましたので、その制作を通して具体的にレスポンシブWebデザインの特徴や今までのサイト制作とは異なる点を体験として掴んでもらえればと考えてます。 技術を習得するには実践を積むのが何より一番早いと考えてます。かと言って実際の案件でテスト的に経験を積むのはリスクもあるので、本書を通してその機会を積んで頂ければ幸いです。 カバーは型押し&ニス加工してます。各々の型押しのサイズが異なりマルチデバイスを表現してます
「Webデザイン」について今の自分が考えてることを記録として書きました。去年に続き二回目です。タイトルに2013年が入ってるのは時間と共にwebのあり方や自分の考えも変わっていくからです。 はじめに このテーマを毎年恒例にしようとしてたのですが、早くも2回めで躓きそうになりました…。 「Webデザイン」とはなにか?じっくり考えてみた(2012年) 内容は「Webデザイン」の範疇を超えてるのですが、前回と同じタイトルにしてます。ただし、年末年始バタバタしてて時間掛けて考えることができなかったので、”じっくり”を”ザックリ”に変更してます。 また、この記事は2012年の総括や2013年のトレンドではなく、制作者の立場からWebについて今の自分が思ってることをつらつらと書いてます。なので、異なる意見があって当然だと思ってます。 読んでくれた方が「webデザイン」について考える一つのきっかけになっ
次のページ
このページを最初にブックマークしてみませんか?
『FigmaのVariableの使い方』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く