運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
WEBディレクターの定義は曖昧です。プロジェクトの舵取り役として、コンセプトから仕様検討、デザイン、設計、プロジェクトマネジメント、マーケティングなど広範囲な業務に携わります。広範囲な業務だからこそ曖昧になりそうな職種ですが、デザイナー、エンジニア、マーケター等、チームから信頼されるために必要な知識をまとめてみました。 WEBサービスの知識 WEBの世界は日進月歩で変化していきます。RSSやソーシャルフィルターなど、自分なりに最新の情報をキャッチできる環境を整える事が大事です。クライアントからの信頼を得るためにも、最新のWEB事情やイケてるデザインをパパっと提案の中に組み込めるといいと思います。情報は大きな武器になるので、アンテナは常に立てておくことをオススメします。 Webディレクターならチェックしたい、ニュースサイト15選 大まかな設計の知識、インフラの知識 データベースの構成やサーバ
こんにちは、あかねです。 金額的に大きな案件やページ数がとても多い案件など、大規模案件をディレクションするときの先回りして準備しておくこと3つを特別にこっそりとご紹介しようと思います。 ※本当は教えたくないだなんて誰にも言えない。。。 1:サイトの規模を把握するための準備 「ざっくりこんな感じで」 ババーンと風呂敷を広げられるけど、中身全然みえないみたいなサイト構成。。。このままだと見積りもスケジュールも作れませんね。 なので、サイトの規模を把握するために2つのことをします。 サイトマップを作る 簡単な構成(ワイヤー、サイトの全体像) まずは手書きから。そして、疑問点やこれあったらよさそうという要素をどんどん付け足します。PCに向かってやるのもいいですが、手書きのほうが発想が広がりやすかったり。。。たまには落書きをしてみるのもいいですね。 大体広げ終わったら、今度はまとめる作業に入ります。
ボックス要素の横並びをCSSで行う場合、昔はfloatプロパティを使うのが主流でした。しかし、CSSの「Flexboxフレックスボックス」を使うとfloatよりも簡潔なコードで、ボックスの豊富なレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サン
見出し要素に連番を振る方法 例えばHTML見出しのh2には、「1、2、3…」と連番を振っていき、h3見出しには「1.1、1.2、1.3…」もしくは「2.1、2.2、2.3…(h2の連番が2だった場合)」といったように番号を振るにはCSSで以下のように書きます。 /************************************ ** h2-h6の見出し要素に連番を振る ************************************/ .entry-content h2{ counter-increment: counter-h2; counter-reset: counter-h3; } .entry-content h2:before{ content: counter(counter-h2); margin-right: 0.6em; } .entry-content
ワイヤーフレームとは ワイヤーフレームとは、Webページのレイアウト図(図1)です。「画面のどこに、何を配置するのか」を決めていく設計図のようなものですね。「デザイン的な要素を含まないコンテンツ(写真や文字など)の配置図」と考えてもらえればいいでしょう。 通常は、実際のデザインに入る前に、トップページやコンテンツページのワイヤーフレームを設計します。もちろん、イメージはデザインもワイヤーフレームの設計も同時に膨らませていきますが、ワイヤーフレームの方は「伝えたいこと」を機能的に配置しなければならないという使命をもっているので、イメージを想起させるデザインとは分けて考えます。 ワイヤーフレームの研究 実際に設計する前は、いろいろなWebサイトのワイヤーフレームを見て研究することが大切です。特に同じコンセプトや目的をもったWebサイトは、訴求する内容もコンテンツも同じだったりするので、どうして
連載第10回目です。前回は、レイアウトに応用できる「スペーシングの奥義」について解説しました。今回はこれまでの内容を踏まえて、トップページのデザインを詰めていきたいと思います。 今回も、前回までと同様に下記のようなモデルケースを用いて解説を進めていきます。 情報を最小に絞り込むことでメッセージは強くなる “ミニマル”という言葉をご存知でしょうか? デザインの世界では“ミニマルデザイン”や“ミニマリズム”など、“ミニマル”という言葉をよく使います。 “ミニマム”とよく似た言葉で、辞書によっては“同じ意味”だと説明しているものもありますが、多くの場合は微妙に説明が違っていたりします。特に“ミニマルデザイン”というように使った場合には、こんな意味になります。 「不要な機能や装飾を避けて必要最小限にしたデザイン」 要するに“シンプル・イズ・ベスト”という考え方です。 この言葉は芸術や建築、ファッシ
こんにちは、@h0saです。 先日、2014年度サービスデザイン方法論 第2回:カスタマージャーニーマップ(講師:コンセント長谷川氏)を受講しましたが、今回はカスタマージャーニーマップの描き方そのものについて、深堀りしてみたいと思います。 長谷川さんから聴いたお話を参考にしながら、よく引用される Rail Europe のカスタマージャーニーマップ(以下CJM)の内容を読み解いていきます。 また応用できるように、他のCJMの事例についても数多く盛り込みました。 それでは以下からどうぞ。 Rail EuropeのCJMを読み解く 引用記事:The Anatomy of an Experience Map | Adaptive path CJMやエクスペリエンスマップについての記事を読むとよく出てくるこのマップは、Rail Europeでの乗車体験(調査〜予約〜旅行〜旅行後まで)を可視化したも
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
新しいWeb開発フレームワークも登場! 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する(※昨年の2015年版はこちら)。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」(「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み)を使って、ライブラリの人気をジャンルごとに比較した(※ライブラリ名が一般的な英単語の場合、Web検索時に、
今回はCSSの display: inline、display: block、display: inline-block をマスターしよう!で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。 目 次 へ 戻 る CSSの【display】プロパティでよく使うものをあつめてみた。【第一回 list-item・flex・その他編】 みなさま、お久しぶりでございます。やのっぱでございます(´・ω・`)ブヒー 今回はCSSの display: inline、display: block、display: inline-block をマスターしよう!で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。 displayはよくinlineやblock,inline-block,noneを使用しますが、他にもたくさんの値が用意されています。 たく
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.
レスポンシブサイトではウィンドウの幅(画面解像度)によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ(画面幅/高さ)の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
こんにちは。主にイラストコンテンツを制作しています、こばやしです。 先日、知人から【アンティーク風ウェディングボード】の制作を頼まれたのですが、イメージにピッタリ合ったもの&オリジナル感ある素材を探すのはなかなか難しいですよね。 そこでPhotoshopを使い、好きなテキストや写真をアナログなスタンプ素材風にしてみました。 例えばこんな雰囲気の素材が ササッと簡単に作れてしまう方法を、今回はご紹介したいと思います! 目次 Photoshopでスタンプ加工<テキスト編> Photoshopでスタンプ加工<画像編> Photoshopでスタンプ加工<テキスト編> 1.加工したいテキストを用意 文字色を【黒】、レイヤースタイルの境界線を【白】に設定しておきます 2.スマートオブジェクトに変換し、フィルターギャラリーから以下のスマートフィルターを順に適用 【1】[ブラシストローク] → [はね]
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報(これも任意の文字列)を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
morimorihoge@Webチーム部長です。ご無沙汰しています。ゴ魔乙はギルド戦が実装されてから拘束時間が多くなり、そろそろ見切りを付けようかとも思い始めた今日この頃です。とりあえずポケモンGOは始めました。 しばらくTechRachoに投稿できていなかったわけですが、別に遊んでいたわけではなく、むしろ開発会社としての本業の方で一杯一杯でなかなか記事を書く気合を充填できていませんでした。 今回は、最近社内で(というか主に僕のいるWebチームで)取り組んでいる社内エンジニアのスキルアップへの取り組みについて、これまでの経過と近況を書こうと思います。長いです。 ※今年に入ってから弊社は事業拡大を目指して採用活動を強化しており、現在進行形でメンバの増強を行っています。新しい人が入ってくる中で古くからの人もいるという当たり前のことではありますが、過去にこういう取り組みをしていたんだよという記録
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く