PSDファイルを基にしたリリースレベルのレスポンシブデザインの作り方
前回の「コーディングの手腕がないデザイナーだけでWebページ制作をしてみた件について」から続いていたLP（ランディングページ）制作も、ひとまずは落ち着いたかのように見えた。 しかし、クライアントもいろいろとWebの最新情報を集めているようで、次なる要望を伝えるメールが届いた。 スマホで見てもPCと同じレイアウトだから、ちょっと使いにくいので、スマホで見たときはレイアウトを変える方法、「レスポンシブ」っていうのですか、アレをやってほしいのです。社長は「岡本さんなら10分くらいで終わらせられる」って言うのですが、さすがにそれは難しいと思うので明日の15時くらいまでにいただけるでしょうか？ また明日！ しかも検討の余地すら与えられない！ 「Adobe Creative Cloud」なら何とかなるのだろうか……。 「レスポンシブWebデザイン」（以下、レスポンシブデザイン）というのは、デバイスの情
納期明日!? PSDを一晩でWebページにする最新Web制作フローを試してみた
降って湧いたランディングページ制作案件 制作業をしていると、いわゆる「ブラック案件」に遭遇することが結構ある。今回、筆者のチームはLP（ランディングページ）の制作を受注した。LP制作なら数日あれば何とかなるだろうと思っていたところ、クライアントからのメールの最後に、このような一文が書かれてあった。 明日15時までにいただけますと幸いです。 もうすでに18時を回っている。22時間で作ってお渡ししろというわけだ。全くもって幸いじゃない。これは、もう災いである。 デザイナーが高速でデザインを終えてくれて、運良くクライアントの承認がすぐに降りた。後はコーディングをしていくだけだ。降って湧いたブラック案件とはいえ、きちんと仕事はこなしておきたい。そして、できることならちゃんと寝たい。作業時間を短縮しつつ、きっちりクオリティは担保できる、そんな夢のようなツールがあればいいのに、残念ながらそう都合が良い
絵心が無い人が簡単なグラフィック素材を作るのに役立つ記事8選
連載第1回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、連載第2回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになり、さらに前回の「HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選」でWebサイトにさまざまな動きを加えられるようにもなった。しかし、Web制作現場では、まだまだ必要とされることは多い。 例えば、Web制作を生業としていると、個々のパーツ／グラフィック素材をデザインする機会に遭遇することがよくある。絵心があるとか無いとかは別として、ワークフローに組み込まれている以上、ボタンを作るとか、背景のテクスチャを作るとか、できないと作業が前に進んでくれないことだってあるのだ。 そこで、今回はWeb制作で必要となるパーツ／グラフィック素材を簡単に作
Dreamweaverで始めるWordPressサイト構築の基礎知識
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamweaverの概要と最新版Dreamweaverの新機能、WordPressの概要、Dreamweaver＋WordPressの環境構築を行う際に必要な初期設定などを紹介していこう。 そもそもDreamweaverとは、なぜDreamweaverを使うのか DreamweaverはWebサイト／Webアプリケーションの制作ツールだ。HTMLエディタという見方をすれば非常に動作が重そうで、他の軽量なエデ
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換 アドビシステムズは3月10日に始めた新しいブログ「Design and Web」の中で、FlashをHTML5のCanvas要素で置き換える「Smart Paste」のデモ動画を公開しました。この機能は現在開発中のDreamweaver CS5のプロトタイプ機能とのことです。 （追記3/18：上記ブログの1つ目のエントリ「Design & Web」に、紹介する機能は「It won't be in the next version of CS.」であるとの記述がありましたので、「Dreamweaver CS5」の部分を削除させていただきます。すいませんでした）。 FlashのファイルをJavaScriptでレンダリング、Canvasへ描画 11日付けで公開されたエントリ「Canvas fo
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと | clear sky source
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ
Dreamweaverのデザインビューを使い倒すために覚えてきたいこと | Webデザインのタネ
一定期間更新がないため広告を表示しています
作業効率化！Dreamweaverのオススメ拡張機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 Dreamweaverの数ある機能を十分に活用できてる方ってどのくらいいるのでしょうか？ 私の場合、これまで最低限の機能しか使ってこず、操作上でわずらわしく感じることでも我慢してたんです。で、そのわずらわしさも苦痛に感じなくなってきて、いつの間にか慣れちゃってました。いけない子ですね。 そこで今日は以前の私みたいな方のために、作業効率を良くするDreamweaverの便利な拡張機能やおすすめ設定術を紹介させていただきます。 閉じタグコメントを自動挿入：End_comment.mxp 閉じタグコメントはソースの構造をチェックしたりする時に便利なんですが、その都度書いていくのって手間ですよね。 この拡張機能は閉じタグコメントを自動で挿入してくれます。もちろんIDとclassもちゃんと認識してくれます。 コメントを生成して挿入するDreamweaver用の拡
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー？」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by：fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
MacでコーディングするならCoda2！DreamWeaverから切り替えた使用感などをレビュー！ | PLUS
福岡を拠点にWebサイト制作・iPhoneアプリ制作を行うフリーランス 入江慎吾のWebサイト。 PLUSはワクワクするWebサービスやiPhoneアプリを制作しています。 Macでは有名なエディタCodaがメジャーアップデートされ、Coda2が出ました！あわせてiPadアプリのDiet Codaも出ていて、iPadでもコーディングができる時代に。DreamWeaverを使っていましたが、前から気になっていたCodaをこの機会に使ってみようと思い、購入しましたので使い勝手などをご紹介します。 Coda2で何ができる！？ ほぼDreamWeaverと同じことができます。 ・HTML、CSS、JS、PHP、Rubyなど言語を問わずコーディングができる ・MySQLのかんたんな管理ができる(簡易版phpMyAdminみたいなもの) ・FTP機能もついている ・SSHも使える 動作が軽
サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」に挑戦してみよう
Dreamweaverとは Adobe Dreamweaver（以下、Dreamweaver）は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー（HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面）、デザインビュー（Webページをブラウザで表示した形に近い状態で編集できる画面）の両方で編集できます。 さらに、Dreamweaver CS4で登場したライブビュー（レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面）では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。 デザイナーにとっては、HTMLやCSSのコードをオートコンプリート（自動補完）してくれる機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nyle Engineering Blog
HTML・CSS・Sassのコーディング環境 2012 | Webデザインのタネ
Dreamweaverのコードカラーリングまとめ | Webデザインのタネ
美人中国人講師と初心者から上級者まで中国語講座が学べる 600本無料動画が良い! | Last Day. jp
