1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。
1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
『解像度をあげる、解像度をおとす』
超初心者向けフォトショップ&イラストレータ講座/色彩や画像に関する基礎知識/知っとくと便利な画像加工の裏技/写真集・グッズ制作ツールや素材を紹介★ そろそろ年賀状どうしようかなあ…と 考え始めている人も、多いんじゃないでしょうか？ 今日は、年賀状制作に最低限必要な 画像の解像度について、 詳しく説明してみたいと思います。 年賀状など、はがきを作る場合は、 紙に印刷するわけですから、 使用する大きさ（実物大）で、解像度は300dpi必要です。 まず、画素数はそのままで、 解像度を上げる場合について、説明します。 解像度は、フォトショップで イメージ→画像解像度 を見ると、確認できます。 （１）たとえば、72dpiで、 A4サイズの画像データがあったとします。 ピクセル数は、幅595×高さ842pixel、 画像の寸法は、幅210×高さ297.05mmです。 （２）これを、300dpi
Fancyboxでiframeの高さをコンテンツにあわせてみたり
イラストサイトの「さわやかまみれ」では、 jQueryプラグインFancyboxを使っております。 Fancyboxはiframeもサポートしており、コンテンツ”storys”でバックナンバーをモーダル表示しているのですが、少し不便を感じておりました。 デフォルトではiframeの幅、高さを与えて（固定して）やらなければなりません。
Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」
「学校では教えてくれない、89の時短テクニック」「自己流で時間をムダにしていませんか？ウェブデザインをもっとラクに、もっとすばやく」ということで、かなり実践寄りの効率的なテクニックばかりを集めたのが「神速Photoshop [Webデザイン編]」です。ちょうどPhotoshop CC＋Lightroom 5が月額980円で使える「Photoshop 写真家向けプログラム」を使い始めたところだったので、しげしげと読んでみてお役立ちっぽいのがないかどうか探してみました。 まず以下が神速デザイン五カ条、「ショートカットを活用しよう」「最新機能を使いこなそう」「目的によってツールを使い分けよう」「「直し」に強いデータを作ろう」「面倒な作業は自動化しよう」ということで、どれもこれもごもっともな感じ。人は放っておくと今までの慣れ親しんだやり方が非効率的であっても「慣れているから」というただそれだけの理
![Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c41fbe4b12f924168669811ff3092c3f86d6551/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2014%2F04%2F04%2Fphotoshop-god-speed-web%2FP1930188.jpg)
ポートフォリオサイトの作り方
就活に使うポートフォリオサイトってどんな手順でどんなものを作っていいかよくわからず、制作した当時はとても悩んでいました。 今回は、そんな実体験を元にしたポートフォリオサイトの作り方のポイントをご紹介します。 なぜwebデザイナーの就活にポートフォリオサイトが必要なのか ポートフォリオは自分自身のデザインスキルや技術スキルの作品集。自分がどんな制作者で何が得意なのか、何が出来るのか、制作したサイトを見れば大体分かります。 webデザイナーにとってのポートフォリオは自分のちからを相手に知ってもらう大事な武器ですので、時間がないからといって片手間で作ったりせず、綿密に計画してフルパワーで作り上げる必要があります。 ポートフォリオを作る前の下準備 作品の構成要素 ポートフォリオに制作実績を掲載する時、下記の6つは載せておきましょう。 サイトのタイトル サイトのURL サイトのスクリーンショット 制
Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！
はい高いですか？こんなもんですか？以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。 コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ
身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | DevelopersIO
第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の
WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも！そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS（コンテンツマネージメントシステム）というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
Design Kindle | Free Premium Web Design Resources
Moonify UI 3405 Joachim Löfstedt Sliding Tags 852 Thomas Bossée Grunge Textures Vol. 2 815 Caleb Kimbrough Butterscotch UI Kit 8259 Thomas Bossée Socialis 6562 Victor Ingman Petite Icons 2494 Monsters Lab Design Portfolio Icons Premium Prekesh Chavda Grunge Textures Vol. 1 1463 Caleb Kimbrough Glyph Icons 5184 Pranav Pramod RSS Tweet Like About Design Kindle We love how helpful the web design comm
国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス
最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book
【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net
Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日本語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
![[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。
例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された（というか Web サイトからコピーした）ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に
WEBデザイナーなら一度は読んでおきたい、デザインの基礎的な知識と作法
「神は細部に宿る」といいますが、「木を見て森を見ず」という言葉もまた確かな格言であります。 常に自問自答しながら進んでいくコトこそが、WEBデザイナーにとって一番の課題であるというのも、あながち間違っていないだろうと思います。 しかしながら、その自問自答の切り口すら見当たらないという場合もあって、それは時間と共に正解も不正解も見失っていき、そりゃもう脳内大惨事となっていくのです（経験談）。 なので今回のエントリーでは、「デザイン」そのものに関する情報をまとめてみました。 WEBデザイナーとしての知識や素養であったり、心留めておくべき作法や着眼点といったものを持つための助力となれば幸いです。 デザインの基礎的な知識と作法 デザイン講義シリーズ creamuさんがデザインの専門学校か何かの授業で学ばれたコトを、惜しげもなく公開なさっています。 「デザインとは何ぞや!?」という観念的な部分から入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このWEBサービスやアプリ達に感謝しなければ年を越せない！僕が今年使い倒した2012年のベストを全部ご紹介！ | バンクーバーのうぇぶ屋
無償で商用利用できて品質の高い日本語フォント一覧 - Liner Note