はてなブックマーク

Amazon Unlimitedのサービスが始まりました。 Web関連の本の価格の高さに悩んでいたところに、月額980円で読み放題なんて、夢のようです。 Amazon Unlimitedはじめるか迷っている人のために、Amazon Unlimitedで読めるWebデザイン関連の本をピックアップしました。 Web Designing Web Designing 2016年8月号 ［雑誌］ Webデザイナー御用達のWeb DesigningもAmazon unlimitedで読めるようになりました。 本の価格が1530円と考えると、かなりおトクですね。 バックナンバーも読めます。 +DESIGNING +DESIGNING VOLUME 40 バックナンバーも読めるので、うれしいですね！ 特に文字の特集は勉強になります。 新しい文章力の教室　苦手を得意に変えるナタリー式トレーニング 新しい文章

アイコンを作成するのは大変ですよね。特に大量になると、時間も手間もかかります。 そんな時に便利なのが、Googleの「Material icons」です。 下のアイコンは、すべてWebフォントです。 faceassignment_indlocation_onandroidfeedbackflight_takeoffgradehttps Webフォントだけでなく、SVGやPNGも利用できるのでカンプの作成にも便利です。 アイコン一覧 すべてのアイコンは下記でみることができます。 Material icons 対応ブラウザ Google Chrome 11 Mozilla Firefox 3.5 Apple Safari 5 Microsoft IE 10 Opera 15 Apple MobileSafari iOS 4.2 Android Browser 3.0 最近のブラウザには、大体対

HTML/CSSは、初心者でも簡単に使えますが、運用するとなると綿密な設計が必要です。 最近、自分の知識をアップデートするためにいろいろ調べたのですが、知識不足を実感し、あらためてHTML/CSSは奥が深いと感じました。 コーディングをレベルアップや見直す上で、参考になった本の紹介です。 HTML5マークアップ 現場で使える最短攻略ガイド カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL) セマンティックなマークアップが求められますが、この本を読むことで今まで曖昧な部分が明確になりました。特に質問されても曖昧にしか答えられてなかった、アウトラインについての解説があるのがありがたかったです。コーディングを極めたいと思うなら、最初に読んでおくといいです。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の

タイポグラフィって、本を読んでも難しかったりするし、一生勉強し続けなければならない分野です。 そんな中、米倉明男さんのスライドが非常にわかりやすかったのでご紹介。

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい

デザインをやっていて、写真を並べたいときボックスと余白の計算が面倒だったりしませんか？ そんな時に便利なサイトが「Gridulator」です。 Gridulator: Make pixel grids, lickety-split 「Overall Width」に横幅を、「# of Columns」にカラム数を入力すると、 幅と余白の候補を自動的に表示してくれます。 MakePNGをクリックすると下記のようなPNG画像がダウンロードできます。

キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを中心にまとめました。 Photo credit: mari ce / Foter / CC BY-NC-ND 回転させる 【CSS3】要素をクルクル回転させる。 [CSS]シャドウもくるっと！ふわりと浮かせた画像をくるっと回転させるスタイルシート テキストをシャッフル HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 テキストをシャッフルしながら表示するjQueryプラグインを試してみた。 揺らす [CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート 光らせる [CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート ブルブルさ

サイトをみていて「どんなプログラムやサーバー、プラグインを使っているんだろう？」と思うことありませんか？ 私の場合、サイトのソースコードをみて判断するのですが、 ソースが長かったり、使用しているプラグインの数が多かったりすると面倒だったりします。 そんな時に教えてもらったアドオンがこの「Wappalyzer」。 ChromeやFirefoxのアドオンかブックマークレットで、 サイトで使用しているサーバーやプログラム、プラグインなどが表示されます。 Wappalyzer公式サイト Chrome Wappalyzer アドオン FireFox Wappalyzer アドオン インストール後、「Wappalyzer」アイコンをクリックすると、表示されます。 このサイトでしたら以下の感じで表示されます。

新人の頃、周りより仕事が遅いためよく叱られていました。 さらにデザインが遅いので、デザイナーとしては致命的でした。 （しかもクオリティも低かったです．．．） こうなると会社に居場所はありませんでした。 今考えると、ただ仕事の仕方を知らなかっただけでした。 デザインそのものを早くすることも重要ですが成長には時間がかかります。 デザインの時間を捻出するためには、それ以外の仕事を早くするしかありませんでした。 最近では仕事が速いという評価をもらっていますが、 その基本となったスピードアップのために改善したポイントです。 もくじ ショートカットを覚える メールを整理する データを整理する あと回しにしない チェックする ショートカットを覚える ショートカットはそれなりに覚えていたつもりですが、 他者からみれば全然足りませんでした。 すべて覚える必要はありませんが、主要なものよく使うものを覚えること

必要なテクスチャ素材を探していて時間がかかったり、 やっと見つけたと思ったら商用利用不可だったり、 と素材を探すのは結構手間です。 そんな時には、テクスチャも作ったが早いです。 PhotoShopの知識を深めるためにも、テクスチャの作り方をまとめてみました。 もくじ 布 紙 木目 レザー・皮 金属 石 炎 水 ガラス 空・雲・雷 草・芝生 地面 ザラザラ系 布 布地のテクスチャの作り方 布テクスチャの作り方（Photoshop） デニム生地風テクスチャ作成法 デニムっぽいテクスチャーの作り方。 フェルト風のテクスチャ作成方法 PhotoshopでApple風布地テクスチャを作る 紙 しわくちゃの紙のテクスチャを作成する Photoshop – 古い紙を作ろう！ 01 Lesson1 和紙風のテクスチャ作成 - MdN Design Interactive 和紙のテクスチャをPhotosho

まだレスポンシブの案件が少なく、 知識もスキルもまだまだなのですが、 いくつか作ってみて、困ったことの解決方法です。 もくじ Javascriptを使った場合の端末ごとの処理 フォントによる見栄えの違い 画像内の文字が見づらい 端末の違いによる処理スピード カンプ通りのコーディングが難しい まとめ Javascriptを使った場合の端末ごとの処理 レスポンシブWebデザインでは、 Javascriptの処理がはいると途端に面倒になると感じました。 例えば、 PCの場合のみJavascriptでアニメーションが必要で タブレット、スマホで必要ない場合がありました。 端末によって、Javascriptを「使用する」「使用しない」は、 画面サイズかユーザーエージェントで振り分ける方法を考えました。 今のところ、メディアクエリーでCSSをわけているので、 それにあわせてjQueryでウィンドウサイ

グラフィックのみ、コーディングのみの WEBデザイナーは少ないのではないかと思います。 マーケティングやSEOやアクセス解析など、 必要な知識が多岐にわたります。 勉強する上で、概要を知るのは上達の近道だと思いますので、 WEBデザイナーに必要な基礎知識のスライドをまとめてみました。 自分の場合、新人が来た場合に 説明するよりも簡単なので、読んでもらうようにしています。 Webデザインのセオリーを学ぼう 「近接」「整列」「反復」「コントラスト」をうまく使えるようになると、 デザインにまとまりができて、わかりやすくなります。

photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス

フォトショップで同じ場所にコピーするには、 レイヤーを選択後、「command + J」です。 同じ位置にコピーされます。 コピーするとずれてイラっとすることがありますが、 これで大丈夫。 超小ネタですが、知っておくと超便利です。

学校ではPhotoshopを習っていたのに、 いざ働き始めるとFireworksだったということがあるかもしれません。 Fireworksでよく使う機能と便利な方法・技をまとめました。 基本的な使い方 文字設定／Fireworksで覚えておくと便利な文字設定まわりのTips 文字に線／Fireworksでできる文字装飾（縁取り編） 破線の書き方その1／【Fireworks】 ストロークを破線で描く 破線の書き方その2／Fireworksで破線をラインツールやペンツールを使わずに一瞬で描く方法 マスク／Fireworksで写真をマスクする方法 シンボルとライブラリ／こんなに簡単！？Fireworksシンボルとライブラリで楽々バナー管理！ - tomo_e memo フィルター／ライブフィルターによるエフェクトの作成 ドロップシャドウ／「Fireworks」で差がつくドロップシャドウの3つのコ

イラストをつかったサイトは手作り感がでて、親近感がわくので好きです。 そんなイラストを使ったサイトを参考のために、まとめてみました。 こんな素敵なサイトをつくってみたいです。 ちあーず歯科・小児歯科 松山市、伊予郡砥部町の歯科・小児歯科　ちあーず歯科・小児歯科 シュヴァインハイム 手づくりハム・ソーセイジ工房 シュヴァインハイム｜愛知県碧南市 静岡市立-日本平動物園 日本平動物園 安房医療福祉専門学校（仮称） 安房医療福祉専門学校（仮称） ism ism（イズム）｜兵庫県姫路市の写真館・フォトスタジオ いちみや医院 大分県杵築市の耳鼻咽喉科【いちみや医院】 株式会社テトラクローマ 株式会社テトラクローマ--システム開発、デザイン制作なら何でもご相談下さい 浦和つくし幼稚園-採用サイト 学校法人秋本学園　浦和つくし幼稚園-採用サイト 泊まれる学校-さる小 泊まれる学校

いまやJavascriptを使わないサイトはほぼないと思います。 WEBデザイナーもJavascript、せめてjQueryは使えないと 厳しい時代です。 JavaScriptやjQueryは時間をかければ、 基本的なことは絶対にできるようになります。 ここでは必ず上達する3つのコツを紹介します。 （1）本を最初から最後までひと通りやる 初心者用の本を一冊買ってわからなくてもいいので、最初から最後までやる。 デザインを模写するの同じで、とくかく黙々とコードを書いていくことです。 ポイントはコードは必ず書くこと。 書くことで少しづつ構造がわかってきます。 また、同じような構文ができてくることに気づくでしょう。 それは少しずつ理解できている証拠です。 読むだけでは絶対に覚えないのでダメです。 （2）暗記する とにかく暗記することです。 学生時代に、英語の単語を覚えるために何度も書いたように と

よく使うこのギザギザの丸（円）。 今まで何度も使ってきましたし、使い映えするので、 絶対に暗記しておきたいです。 1．丸（円）を描く 「楕円形ツール」で丸（円）を書きます。 楕円形ツールを選択状態で、【Shift】を押しながらドラッグすると正円が描けます。 楕円形ツールを選択状態で、【Shift】 + 【Option（alt）】を押しながら、ドラッグするとクリック地点を中心に円が描けます。 楕円形ツールを選択状態で、【Option（alt）】をクリックするとサイズを指定できます。 2　「アンカーポイント」を追加 「オブジェクト」→「パス」→「アンカーポイントの追加」でアンカーポイントを追加する。 （これはしなくてもギザ丸はできますが、ギザが細かくできるので行います。） アンカーポイントが4つから8つに増えた。 3　「ジグザグ」を設定 「効果」→「パスの変形」→「ジグザグ」を選択 値を例えば

モノトーンはシンプルなだけに、写真などの素材のよさが際立ちます。 CHANCE MAKER CHANCE MAKER ハロルド official web site ハロルド official web site adidas Journeys | Südtirol adidas Journeys | Südtirol Cyril Masson Cyril Masson ABRAHAM ABRAHAM NURO DEVILMAN NURO DEVILMAN LUIGI BORRELLI TOKYO LUIGI BORRELLI TOKYO（ルイジ ボレッリ トーキョー） | 東京都港区北青山 Adaptive Path Adaptive Path Mammoth Media Mammoth Media Porter des boutons Porter des boutons - ポルテ デ

学校や独学だと、カンプデータ（デザインデータ）を見る機会がないかと思います。 実際、一番役にたったのは、 働きだして人が作ったデザインデータを見たときです。 意外と作り込んであったり、凄いテクニックを使ってるかと思ったら普通だったり。 自分一人だと正しいかどうかで迷ったりしがちです。 以前、作ったFireworksのトップページのカンプのボツ案を調整して、 ダウンロードできるようにしました。 写真等は削除していますが、データ的には参考になるかなと思います。 （デザインはどうかと思いますがorz）

新人がデザインの業務で頼まれることが多いのばバナー。 小さいので簡単と思われるけど、実はかなり難しく意外と制作に時間がかかるのがバナー。 小さいけど、奥が深いのがバナー。 そんなバナーを作るコツがわかる記事をご紹介！ バナーの基本的な考え ディレクターなら知っておきたい「バナー広告制作の基礎知識」 100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本 デザインのコツ 新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します 『デザイン作業のスピードアップ』 【実例】デザイン初心者が学んだちょっとしたコツで変わる！バナーの小技 新米のwebデザイナーが作るバナー制作時のあれ、これ | ポケットラボ デザインリンク集 いろんなバナーのいいところを真似ることも重要です。 バナーデザインDB バナーデザイン専門ギャラリーサイト | レトロバナー バナーデザインギャラリー

新人の頃、 「クライアントに『自分でもつくれる』と思われたらダメ」 とよく先輩に言われていました。 クライアントから、 「自分でもパワポやエクセルで作れそう」と思われると デザイナーとして失格ということです。 新人の頃は、ついついワイヤーや原稿のパワポ通りに作ってしまいがち。 （レイアウトだけでなく、デザインさえも！） しかも、複数案をだすのができないので、一度ワイヤー通りに作ると、 それ以外のデザインを思いつかない傾向があるようです。 （いわゆるグルグルするっていうことです。） デザイン経験が多くなることで、そういうことは少なくなっていきますが、 納期は成長をまってくれません。 デザインではよく使われるパターンがあるので、 そのパターンを増やすこと、 よくいわれる「デザインの引き出し」を増やすことが近道です。 私も文字については未だに勉強中で、 実際正しいかどうかはわかりませんがいくつか