ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
SEO対策に役立つツール・Firefoxアドオンまとめ25選 - ホワイトベアー株式会社
こんにちは。寝ても覚めてもSEOの事で頭がいっぱいな、SEOディレクターのようすけべーです。 SEO対策では、自分のサイトや他社のサイトの状況を常に把握しておく必要があります。 とは言え、1ページ1ページ見てもキリがありません。よって、サイトの状況を素早く把握するうえで便利ツールはかかせません。ツールを利用することで、時間がかかっていたことが一瞬で解決することもあります。 それでは、私が実際にSEO業務で利用しているツールの一部を紹介していきます。 サイト調査ツール サーチコンソール Google純正ツール。検索キーワード確認やサイトのインデックス状況、（手動）ペナルティの有無、クロール状況などSEOに関するデータを網羅的に確認出来ます。 URL：https://www.google.com/webmasters/tools/home 料金：無料 PageSpeed Insights PC
Webディレクター～強みを活かすディレクション術～
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか？ 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに！ ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします！Read less
デザインのアイデア探しに最適! 国内Webギャラリーサイトまとめ - MdN Design Interactive
Webデザインのアイデア探しのときに役立つ、デザイン性の高いWebサイトを集めたWebギャラリーサイト。国内外に数多く存在するが、国内向けサイトデザインのアイデアを探す際は、やはり国内のWebサイトを中心に集めたWebギャラリーサイトがよいだろう。ここでは定番のものから最近注目を集めるWebギャラリーサイトまで紹介していく。 MUUUUU.ORG 縦長のサイトを厳選して集めたWebギャラリーサイト。クールなデザインから、ポップなデザインまでさまざまなWebサイトが揃っている。カテゴリは、Webサイトの業界別にわかれたINDUSTRY、デザイン用途別にわかれたDESIGN、Webサイトの形態別にわかれたTYPE、色彩別にわかれたCOLORの4つが目的別に用意されており、使いやすい。 URL：http://muuuuu.org/ I/O 3000 Webデザイナー/フロントエンドエンジニアとし
ウェブ制作会社なのに、事務所はなぜかソバ屋さん風！株式会社まぼろし…という会社のウェブサイト＆事務所が面白い。 - SONOTA
今回は株式会社まぼろし…という会社のウェブサイト＆事務所が面白かったので、それを話題にした記事を書かせていただければと思います（上記画像が事務所の写真）。 まぁ会社名からして冗談かと思うような名前ではありますが、ウェブサイトや事務所もについても「まさに、まぼろし」という感じになっているので、是非、ご覧ください 株式会社まぼろし 事務所はまるで日本蕎麦屋： 株式会社まぼろしの事務所は池袋駅からすぐちかくの場所にあるんですが、事務所はまるで日本蕎麦屋さん。代表取締役の話だと、事務所を作る工事をしていた際に「ここにはどうやらお蕎麦屋さんが出来るらしい」と近所の方がザワザワしていたというんですから、よっぽどです（ビルの１階に事務所があるため、余計に飲食店が開業するのではないかと話題になっていたそうです）。 特に下記の写真などはもう…そば屋以外の何者でもありませんよね（苦笑）。Facebookを見る
Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
Webデザインの作業効率が間違いなく上がる！初心者なら即インストールしたい、Photoshopプラグイン20選
Photoshopは優秀な画像編集ソフトとして有名ですが、その機能を完全に使いこなすのは困難です。まして初心者ならショートカットすらわからないので作業の効率なんて言わずもがな。 そんな初心者にもプラグインという救いがあります。必ず入れておきたいものや使うシーンが思い浮かばないものまで色々ありますが、ここでは、とりあえず最初に入れておいたほうがいいプラグインを紹介していきます。 初心者なら即インストールしたい、Photoshopプラグイン20選1：Social KitSocial Kit FacebookやTwitterといったSNSのレイアウト用PSDを生成してくれるプラグイン。Webデザインを担当している人は、頻繁に変更されるSNSの仕様やデザインに頭を悩ませたことがあるのではないでしょうか？しかし、この「Social Kit」があればもう頭を抱える必要がなくなります。 自動アップデート
รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับมิได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสมา
カスタマイズ性が最強のツールチップ実装jQueryプラグイン「Protip」:phpspot開発日誌
Protip - Yet another jQuery tooltip plugin カスタマイズ性が最強のツールチップ実装jQueryプラグイン「Protip」 表示位置、アニメーションのカスタマイズ、好きなコンテンツの掲載、スキン機能など、これでもかという位ツールチップに込めている辺がある種凄い 表示位置をとっても、基本は４箇所のライブラリがほとんどですが１６箇所選べます 関連エントリ 軽量・レスポンシブなツールチップ実装「tipso」 入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation-Bootstrap-tooltip」 ツールチップ等、画面をはみ出していたら表示位置を変える等できる「offscreen.js」 新しいデザインのツールチップサンプル集 ツールチップスタイルのツールバー実装「Toolbar.js」
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
DreamweaverでHTML/CSSのコーディングをせずにWebサイトを構築してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 先日、「Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法」という記事を執筆したところ、多くの方に見ていただけて嬉しく思っています！ ありがとうございます。 前回の記事を執筆したあと、「Dreamweaver CC 2015でどこまでできるかな？」という考えがふつと湧きました。 私自身はもともとコーディング大好きっ子なのでパチパチ打つのが好きなのですが、先日初めてビジュアルエディタをさわったので、「一切コードを書かないでどこまでできるのか」というチャレンジをしてみようかなと！ 「手打ちのほうが早いんじゃない？」と思う方も、普段触らないツールがどのくらいの力を秘めているのかを見学する気持ちで読んでいただければと思います！ そして「コーディングはできないんです……」というデザイナーさんは、まず
最近のWebデザインで採用されているレイアウトやコンポーネントが豊富に揃ったPhotoshopとSketchの素材 -Baikal
縦長ページ、マガジンスタイル、カード型レイアウト、ランディング、コマース、ブログ、ポートフォリオなど、最近のWebデザインで見かけるレイアウト、ヘッダやフッタ、エレメントのバリエーションが豊富に揃ったコンポーネントベースのUI素材を紹介します。 しかも、商用利用できる全揃いセットをコリスのビジターにプレゼント！ 勉強にもよし、そのまま使ってもよしの素材です。 応募期間は、2015年9月10日で終了しました。 Baikal – Component Based UI Kit プレゼント商品 応募期間 応募要項 当選発表 今回は当ブログのアフィリエイト還元のプレゼント企画で、提供はgreedeals様。 greedealsでは、WordPressやBootstrapのテーマをはじめ、アイコンやフォントなどの有料素材をセットや限定特価で扱っているサイトです。 プレゼントは、UI8で販売されている「
SourceTreeの使い方 | コミット間の差分ファイルの抽出 (カスタム操作を使う方法) – ICS MEDIA
今回はGitクライアントソフトのSourceTreeから[カスタム操作]という機能を利用して「コミットの差分ファイルをzipファイルとして書き出す」ことを行います。この処理は納品で前回のリリースとの差分のファイルが必要なときに使用すると便利です。 カスタム操作のデモ動画 カスタム操作としてバッチ・スクリプト・exeを登録すると、上図のようにメニューから実行できるようになります Gitをインストールする ※Gitをすでにインストールされている方はこの作業は不要です。SourceTreeの内蔵Gitを使用しているかたはgitコマンドが環境設定に登録されておらず、これから紹介するバッチが実行できない可能性があります。 インストールされているかチェックするためには、Windowsなら「コマンドプロンプト」、Macなら「ターミナル」上で下記コマンドを実行して確認します。 git --version
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証 レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。 結論から言うと、ブラウザのネイティブ実装はまだこれからですし、ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良いと思います。しかし、多くの開発者が多大な時間を費やして実現しようとしているレスポンシブ・イメージです。この存在が日本でもより多くの人に広まればと思い、いまの状況をまとめてみました。 目次 レスポンシブ・イメージのいま レスポンシブ・イメージで解決できる3つの課題 Pic
Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ
フロントエンドのデザインやコーディング時に調べたり、アイデアやインスピレーションがもらえるお役立ちサイトを紹介します。 最近リリースされた、特に便利なサイトをまとめました。
目を引くアイキャッチ画像の作り方、50の作成事例とデザインのアドバイス
あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。 Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。 Steal These 50 Branding Kits For Your Startup 下記は各ポイントを意訳したものです。 元記事ではアイキャッチ画像と同テイストの名刺も同時に紹介されています。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Whimsical: サンプル画像 抑えられたトーンとミニマルなタイポグラフィ 画像にソフトなカラーフィルタを使いトーンを抑え目にし、タイポグラフィ
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
