2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか?」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います! ↑私が10年以上利用している会計ソフト! 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。(模写したデザインを自分のオリジナルで活かせない) もし模写するときはどう
ここで意識してほしいのは、Webデザイン以外のデザインを見るということ。 グラフィックや映像・パッケージ・プロダクト・建築など様々な年鑑が毎年出版されているので、普段見ないデザイン分野やその年のデザイントレンドを一気に見ることができます。 ただ、デザイン書は基本的に高価格のものが多いので、まずは図書館などでチェックすることをオススメします。気に入れば購入し、財産として持っておくと良いでしょう。 …少し脱線するかもしれませんが、こちらのコピー年鑑も面白いですよ。 3.自分の限界を超える もう限界きてるよ…という方に試してもらいたい方法。 それは、制限時間を設けてデザインをスケッチブックに描き出してみることです。 例えば3分間でスケッチブックに何個のアイデアを描き出せるか、一度やってみてください。 さて、いくつアイデアが出てくるでしょうか。 最初は1つや2つくらいしかアイデアが出てこなくても、
この記事は、普段サーバーサイドスクリプト言語(PHP、Perl、Ruby等)を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら!」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
普段は主にWebフロントエンドを担当しているライターの内藤です。 下記の記事にインスピレーションを頂きましたので、美しいだけではない”優れている”と思われるWebデザインについて、要点を簡単にまとめてみようと思います。 僕は普段実装をやっていて、カンプが届いて「これをコーディングしてください!」っていうお仕事がほとんどなのですが、カンプによってはコーディングしやすいものからデザイナーさんに殺意を覚えるものまで色々あります。 デザイナーからコーダーへ直接デザインが回ることもあれば、間にディレクターが入ることもあると思います。 美しい・きれいなデザインであればあるほど、フロントエンド組も、よし、やってやろうじゃないか!と気合いが入るのは事実です。 けれども、美しいだけでなく”優れた”デザインであれば、以下の様なメリットがあります。 コーディングが楽になるのでフロントエンド組に優しい 下流工程の
回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント 1.画像を圧縮する 2.画像はサイズを指定して使う 3.画像は適切なサイズで使う 4.CSS/JavaScriptを圧縮する 5.CSSスプライトを使う 6.不要なCSS/JavaScriptを読み込まない 7.CSS/JavaScriptをまとめる 8.CSSセレクターを最適化する 9.mod_deflateでgzip圧縮する 1.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮
Web制作でのデザインにはPhotoshopを使っています。Kanaです。 ショートカットを使ってPhotoshopを操作しているのですが、作業中、 「え、そんな便利なショートカットがあったの?」といわれることがありました。 Photoshopを使ってデザインされている方の参考になればと思い、私がよく使うショートカットをまとめました:) ショートカットを使うと、マウスの操作が減るので、とても便利ですよ! あくまで私がよく使うショートカットですので、同じ動作が他のショートカットで出来たり、このショートカットがあるのに、あのショートカットはない…ということがあるかもしれません。 1.ファイル管理系ショートカット1-1.新規作成1-2.キャンバスサイズの変更1-3.上書き保存1-4.別名を付けて保存1-5.ウィンドウを閉じる1-6.アプリケーションを終了2.基本ショートカット2-1.コピー2-2
サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware+IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
ウェブデザイナー・ディレクターが実際に、サイトやブログ・ポートフォリオなどの設計をどのように行っているかが垣間見ることができる手書きのワイヤーフレームをDesignbeepからとプラスαで紹介します。 30 Great Examples of Web Design Sketches ちなみに僕は勝負用にA3、携帯用にB5サイズでしゃこしゃこしてました。
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ(いやそのまえにフォトショなりなんなりでデザインカ
[対象: 全員] 新しいサイトを立ち上げるときに役立つ29個のアドバイスをWebmasterWorldでフォーラムモデレータが提供してくれました。 僕たちにとってとても価値ある情報なので共有します。 新しいウェブサイトを公開するときに役立つ29のアドバイス 互換性の問題を後になって生じさせない良いCMS(コンテンツ・マネジメント・システム)で始める フレームワークとプラグイン、アドオンの使用を最低限に抑える ―― 今日はすごくいいものでも明日には頭痛の種になることがある ユーザーにとっては見やすく検索エンジンに対しては短いURLを付けることに重点を置く 粗末なリンクを獲得しないようにする ―― 長期的に見て危険過ぎるし後になって取り除くのにうんざりするほど時間がかかる すでにある他の100のサイトにないどんなものを新しいサイトが提供するのかを自問自答してみる 最初の1年間は、Googleの
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ&ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
書くネタもないので、最近リニューアルしたサイト構築の話しを備忘録として書いてみます。リニューアルといっても目に見える改変ではなくサイトをレスポンシブ化してみたお話です。 レスポンシブ化というのは、私もまだよくわかっていません。 ただなんとなくかっこいいからレスポンシブって言葉を使ってみました(・ω きっかけはGoogle!Google先生がこんなこと仰っているならレスポンシブ化が正しき道なんだろうなと レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす すぺっく 私のすぺっくを正直に書いてみる。 PHPは書ける読める。高校生レベル HTMLは書ける読めるなんとなくわかる。中学生レベル CSSは色変えるとかその程度。幼稚園レベル つまりレスポンシブ化で一番重要なCSSでについてはド素人レベルです。 だからこの本を買ってみました。 ふむふむ!なるほど!デザインはこうやっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く