メディア Media 社会の変化、技術の進化に適応し、地域の生活者が求める情報(メディア)を、求められる適切な形(デバイス)で提供しています。 もっとみる ソリューション Solution 生活者の目線を第一に考えたメディア・コンテンツ制作で、グルメや観光など幅広いジャンルのクライアントのサポートを行います。 もっとみる
メディア Media 社会の変化、技術の進化に適応し、地域の生活者が求める情報(メディア)を、求められる適切な形(デバイス)で提供しています。 もっとみる ソリューション Solution 生活者の目線を第一に考えたメディア・コンテンツ制作で、グルメや観光など幅広いジャンルのクライアントのサポートを行います。 もっとみる
こんにちは、つばさ(@tsubasa123)です。 ちょっと前に私のブログのデザインを変更したのですが、どうもトップページの表示が遅い(気がする)。右半分ははてなブログの仕様上ちらついちゃうのは仕方ないと許容していましたが、なんか全体的に遅い(気がする)。というわけで、本日のテーマはタイトル通り高速化になります。地味な内容ではございますが、よろしくお付き合いください。 早いは正義? 大袈裟に言いましたが… 画像の圧縮 不要な外部リソースの排除 不要なカスタマイズの排除 カスタマイズコードの位置を調整 ライブラリの遅延読み込み jQueryコードの排除 DNSプリフェッチの導入 一連の施策を終えて 具体的なコードも1つご紹介 今後の展望と課題を CSSのインライン化 はてなスターどうしよう 広告も遅い部類 さいごに 早いは正義? だと個人的には考えています。SEOとか専門的なことは知りません
以前、センスの磨き方というエントリを書いたことがありました。 その中でセンスを磨くことは「とにかくインプットの量を増やすこと」と述べました。 実際、何かデザインして行く過程において重要なのは「引き出しの多さ」です。 自分の好きなデザイン、クライアントが求めるデザイン、男性(女性)にウケが良いデザイン・・・ターゲットを定めてそこに刺さるデザインを作るうえでは、やはり作り手のインプット量がモノを言います。 普段ぼくが参考にしているサイトたちを紹介します! 世の中にはギャラリーサイトと呼ばれる、優れたデザインをたくさん集めたサイトが数多くあります。仕事の合間や休日家で過ごす時間にそんなサイトをぼんやり眺めてチェックしています。 そうして日頃から“イケてるデザイン”を吸収するように意識して生活していると、例えば買い物に行って洋服を選ぶときや、食卓に並ぶお皿を一枚買うときにもこれまで蓄積されたものが
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表!確認しておきたいポイントとは? 2017年のWebデザインはどうなる?
こんにちは。 やろうやろうと思って、放置してたんですが、「404 Not Found」のカスタマイズにやっと着手しました。 と言ってもコピペで完了できてしまうので、難しい手順は特にないんですが、せっかく変えたので記事にします! ※当サイトは「はてなブログ」から「ワードプレス」に移行しています。リンク先に飛んでもイラスト付きの404エラー表示にはなりませんが、はてなブログでは実装可能です。あらかじめご了承ください。 404エラーとは まずは404エラーについて。 サイト運営していればお馴染みの“404エラー”。ある程度ネットに触っていれば404に限らず何かしらのエラーを見たことがあるはずです。 そのなかでも、404エラーは「見たことあるかも?!」という方が多いはず。 404エラーは、記事の削除やURLの変更等で、存在しないページがリクエストされた時に表示されるエラーコードです。 SEO効果は
私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。 しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。 そんな悩みを抱えていたある日、下のような記事を発見しました。 追記:元ネタのブログが消えてしまいました。 おお!これこそ、私が探し求めていた記事だ! この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。 クリックすると動画が再生されるのが分かるように マウスホバー時のエフェクト YouTubeとは関係ない画像まで消えてしまう問題を解決 以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。 YouTubeを大量に貼っても重くならないコード [はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザイン
2016 - 05 - 10 はてなブログのスマホ版テーマに施したカスタマイズをまとめました Web はてなブログ 記事を書く以上にブログのテーマをカスタマイズすることが好きなひとり情シスの暗黒卿ことアブラカタブラナカムラ ( @sys_nakamura ) です。なんか韻が踏めている感じなのでこれけっこう好きです。前回、 1 時間くらいで書き終わるかなと思い書きだした「私がはてなブログに施しているカスタマイズまとめ」ですが、全くそんなにサクッと書き終えることはできずに記事完成まで 4 時間もかかってしまい、そしてまだスマホ版へのカスタマイズまとめに着手できていないので着手しようと思います。 こちらが前回書いた記事です。 PC 版に施したカスタマイズのみをまとめています。 前提 CSS を記述するための事前準備 ページ下の「はてなブログをはじめよう!」などの非表示 設定手順 参考にさせて
2015-09-10 「サイトをつくる」のススメ はじめまして。 まみぺこです。 Webサイトをつくるお仕事をしています。 コーディングが大好きなWebデザイナーです。 デザインから HTML / CSS / JavaScript までやっています。 このブログもそうですがデザインからコードまで心をこめて手づくりしています。 これから「サイトをつくるといいよ〜」というお話をしてみます。 とくに「Webをつくるお仕事がしたい」という学生さんや 「やりたいことをしたい」「なにかつくりたい」 「変わりたい」っておもっているひとへむけて 実際に私のつくったサイトの例を紹介しながら たのしくいってみたいとおもいます! 「サイトをつくる」のススメ。 サイトをつくろう やりたいことがわからない。 つくりたいものがわからない。 そんなひとは なんでもいいからひとつ練習だとおもって サイトをつくってみるのは
「はてなブログ」でブログをスタートしてから約2年半が経過しました。この2年半の間にはてなブログもドンドンと進化していて、いろいろなカスタマイズ方法が公開されていたりします。 ちなみにこのブログでもはてなブログのカスタマイズ方法をまとめた記事をいくつか書いていて「Feedlyにワンクリックで登録できる「Feedly Button」をはてなブログに設置する方法」「Twitterのつぶやきを「はてなブログ」のサイドバーに設置する方法」「はてなブログ(Pro)に独自ドメイン(ムームードメイン)を設定する方法をメモしておきます」などは今でもよく読まれている記事です。 そんなこんなで「はてなブログ」のカスタマイズに関して参考になりそうな記事(で新しめのモノ)を探しつつピックアップしてみましたので、参考までにチェックしてみて下さい。 tocotrienol.hateblo.jp www.hatenabl
最近デザイナーやプログラマーを志そうと思った人達に伝えたい。 僕の学部は少し特殊だ。デザイナー、プログラマー、プランナーと目指すところが違う人がわちゃわちゃと混在している。 少し教室をぐるりと歩けば、デザインを学ぶ学部だというのに、映像を作っている人や3Dモデルを作っている人がいたり、果ては漫画を描いている人なんかもいる。WiiUを持ち込んでスマブラしてる人もいる。 そんな中で二年ほど過ごして、ふと最近思ったことがある。デザイナー、プログラマー、プランナーの大きな括りで言えば、根っこの部分でやってる事はほとんど一緒なんじゃないかなあ、というものだ。 確かにそれぞれやっていることは違う。紙媒体やWebのデザインをする事と、コードをガリガリ書くこと、企画を考えるというというそれぞれは全く別物だ。 しかし、それらはあくまで手段だ。これらの手段は「問題解決」という一つの目的を達成するためにあると僕
Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね! 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいということを知りました。 どうやらDreamweaver CC2015では、 レスポンシブサイトのコーディングに便利なビジュアルメディアクエリーバーやリサイズバーの追加 Bootstrapのサポート Emmetの標準サポート 手軽にブラウザや実機で確認ができるデバイスプレビュー機能の追加 な
PR:はてなブログのテーマ「Naked」を作成しました!デフォルトでもカスタマイズもしやすいテーマです。よろしければご利用ください!↓ www.yukihy.com 今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです! 数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。 新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。 カスタマイズ記事まとめ 見出しのデザイン SNSシェアボタン関係 旧バージョン 新バージョン SNSフォローボタン メニュー関係 スマホ版のみ グローバルメニューと両立してレスポンシブ対応にする グローバルメニュー(ドロップダウン)&トグルメニューのレスポンシブ対応 グローバルメニュー(ドロップダウン)&スライドメニューのレスポンシブ対応 レスポンシブ対応な
デザインはセンスや経験も大切ですが、一番大切なのは基本です。 伝わるデザイン、読みやすいデザイン、印象に残るデザイン、今抱えている課題を解決するデザインに必要な基本のルールと制作の流れをしっかりと身につけることができる何度も読み返したいオススメの本を紹介します。 本書は「ノンデザイナーズ・デザインブック(Amazon)」や「デザインの教室(Amazon)」と同系統のものですが、2冊ともかなり前の本なので事例や応用例が古いのが難点です。 今回紹介する「デザイン入門教室」は今月発売されたばかり。デザインの基本を押さえつつ、現代のスタイルが取り入れられた事例や制作の流れが豊富に掲載された一冊になっています。
あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。 Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。 Steal These 50 Branding Kits For Your Startup 下記は各ポイントを意訳したものです。 元記事ではアイキャッチ画像と同テイストの名刺も同時に紹介されています。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Whimsical: サンプル画像 抑えられたトーンとミニマルなタイポグラフィ 画像にソフトなカラーフィルタを使いトーンを抑え目にし、タイポグラフィ
こんにちは、デザイナー兼イラストレーターのもりたです。 ブログの記事を書くときにたびたび絵を描いていたんですが、気づいたら数がたまっていました。なんの参考になるかわかりませんが、せっかくなので制作時間と使用ツールをまとめてみましたので、ご活用いただけると幸いです。 イラストレーターまとめシリーズ おしゃれでかわいい絵を描く、私の好きなイラストレーター5選(アイキャッチ) 「おしゃれでかわいい絵を描く、私の好きなイラストレーター5選」 制作時間 下書きからおよそ45分程度 アニメ的なニュアンスを出したくないときに、こういった頭が小さくて手足の長いスラっとした等身の絵柄をよく使います。 おしゃれっぽく見せるならもっと植物や街などを書き込めればベストなんですが、そこは時間との兼ね合いですね。 使用ツール ステッドラー鉛筆 B3 Photoshop おしゃれな格好をした人を描きたかったんですが、な
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか? Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
ロゴのデザインって、見ているだけでも楽しいですよね。 そんなロゴデザインの2015年のトレンドを分析した「2015 Logo Trends」を紹介します。 ロゴのトレンドの最新版は、こちら。 2021年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ 2015 Logo Trends 下記はLogoLounge様の依頼と許可を受けて意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、無断翻訳・無断転載であると、LogoLounge様から連絡を受けています。 トレンドの流れを見るのも面白いと思うので、過去分も。 2014年のロゴデザインのトレンド 2013年のロゴデザインのトレンド 2012年のロゴデザインのトレンド 2011年のロゴデザインのトレンド 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く