サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
www.imd-net.com
ページ内リンク（アンカーリンク）は、コンテンツ内の言わば目次のようなもの。 メインのナビゲーションに比べると、それほど重要性は高く見られていないかもしれません。 ですがデザイナーの私が、Webサイトの構成やデザインを考えるとき、 メインナビと同じくらい悩まされるのが、ページ内リンクのUIデザインです。 ・ターゲット層は？ ・企業イメージ・ブランドコンセプト・時代にマッチしてる？ ・コンテンツの重要度は？ などなど、、、、 今回は、ページ内リンクのUIデザインに悩んでしまった時、 参考になる15個のWebサイトを、タイプ別にご紹介したいと思います。 1. ブラウザに追従するタイプ 1-1. 川重商事株式会社 ファーストビューでブラウザの左下端にひょこっと現れて、小さく収納もできるページ内リンク。 PCもスマホも同じUIデザインで、リンクエリアの背景が少し透過されているところも親切です。 ●P
近頃、斜め上から見下ろすような視点で描かれたイラストを採用しているサイトをよく見掛けます。 数年前から海外サイトでよく見られるようになり、ここ最近では日本国内でもよく見られるようになりました。 これはアイソメトリックと言われる手法で、ゲームなどではクォータービューと呼ばれよく見られますね。 古いゲームだと「スーパーマリオRPG」「シムシティ2000」「ポピュラス」なんかがクォータービューでしたね。 厳密にはクォータービューとアイソメトリックは違うもののようで、アイソメトリックと呼ぶには描かれる角度が120°グリットであることという決まりがあるようです。 今回は、このアイソメトリックのイラストを採用したサイトをご紹介します。 株式会社メルペイ https://jp.merpay.com/ 株式会社リブセンス https://www.livesense.co.jp/ 株式会社 DK-Power
以前にYahoo！の地図YOLPを使用した、サイト内の地図をカスタマイズする方法をご紹介しました。 ただし、YOLPの場合もカード情報は必要ないとはいえAPIキーを取得する必要がありました。 今回はさらに簡単に、APIキーを取得することなくオープンソースのleaflet.jsを利用してWEBサイトにカスタム地図を掲載する方法をご紹介します。 leaflet.jsとは LeafletはオープンソースのWEBマップ用JavaScriptライブラリーです。 モバイルとデスクトップのプラットフォームの殆どに対応し、FourSquare、Pinterest、Flickrなどの有名なサイトでも使われています。 詳しくは下記サイトをご覧ください。 https://leafletjs.com/ 地図を表示させてみる Leafletのサイトを参考にとりあえず、地図を表示させてみたいと思います。 ただし、Go
「暗い場所で写真を撮ったらブレていた」とか、「シャッターを押したタイミングで被写体が動いた」などで手ブレやピントが甘くなることってありますよね。 そんな写真でも諦めずに簡単に補正をすることが可能なのです。 それがPhotoshopCCに実装されている「ぶれの軽減」というフィルター。 その操作はいたって簡単なので、やり方とフィルターの効果をご紹介いたします。 Photoshopの「ぶれの軽減」フィルターでぶれを補正する 今回のサンプル写真はこちらの野鳥を撮影した写真。 望遠レンズでの野鳥撮影は手ブレがしやすく、シャッタースピードを上げないとなかなかピント合わせが難しい。 そんなピントが甘いこの写真ですが、簡単一発でピントを合わせる事なんて可能なのでしょうか。 補正をしたい写真データをPhotoshopで開き、「フィルター」より「シャープ」を選択、「ぶれの軽減」をクリックします。 するとこのよ
ワンパターン化しがちなパーツのデザインを集めてみた第2弾！ 今回はヘッダーのデザインが素敵なサイトを集めてみました。 IMDではコーポレートサイトを制作することが多く、「ターゲットの年齢層が幅広いこと」「PCで閲覧される方も多いこと」「様々なコンテンツへの誘導がわかりやすいこと」などから、PCのデザインの場合ヘッダーにロゴとグローバルメニューが入る形で制作することがほとんどです。 ただ、前回のボタンと同じでヘッダーも似たようなデザインになってしまうことが多く毎回悩んでしまいます。 そこで、今回はこれまで自分がデザインの参考にしたりいつか試してみたいと思ったヘッダーのデザインを、タイプ別にご紹介させていただきます。 要素の一部が飛び出す ヘッダーの一部の要素が他の要素よりも大きく飛び出しているタイプ。 http://www.kyopla.co.jp/ 「株式会社京都プラテック」の場合お問い合
WEBサイト制作 2018.10.05 Photoshopのバッチ処理でファイル変換を自動化。同じ作業のファイルを一括変換する方法 Photoshopで大量に同じ作業をしないとしなければならない時ってみなさんどうしてます？ 100個のファイルに同じフィルター処理を行いたいとか。 EPSファイルを一括でjpegファイルに変換したいとか。 そんな同じ処理を繰り返す作業を自動化していくれるPhotoshopの機能を紹介したいと思います。 バッチ処理を活用することで作業の時短を目指しましょう。 バッチ処理とは バッチ処理とはあらかじめ決められた作業を決められた範囲のタスクに対して繰り替えし行う処理の事。 例えば500枚の写真を全て720px×480pxにリサイズをしてjpeg圧縮をして保存をしなければならない。 そんな大量に同じ作業を繰り返すときなどバッチ処理で自動化すると便利です。 ECサイトに
WEBサイト制作 2018.08.24 見違えるほど写真が美しくなるPhotoshop Camera Rawフィルターの使い方。 Photoshop Camera RawはAdobeのPhotoshopに組み込まれているRaw現像用プラグインです。 その使い方はAdobe Lightroom CCとほとんど同じ。 基本的には写真のRawデータを現像する際に使用するプラグインなのですが、JPEGにも対応しており写真の補正時には欠かせないプラグイン。 しかも使い方は超簡単。 それでいて見違えるほど写真が変わる。 だからタイトルではたいそうに「使い方」とか言っちゃってるけど、ほとんど直観でも問題ない。 でもどこまで簡単で、どれだけ美しく変わるのか知ってもらいたいので紹介。 ここまで変わるCamera Raw なんのへんてつもない単なる逆光で暗いだけの写真。 この写真をPhotoshop Came
【Adobe XD】ホバーアニメーションの応用編～パララックス風の動きを再現してみよう～ 前回の記事では、Adobe XDの「ホバーステート機能」を使った画像のホバーアニメーションの作り方をご紹介しました。今回の記事では、･･･ View More
ビジネス 2015.08.13 大手と真っ向勝負をしない。真逆を貫く中小飲料水メーカー「木村飲料」が熱い。 本日のコラムはお盆休みの企画コラムです。 お盆でお出かけする方、お土産には静岡のご当地サイダーがおススメ。 数々のユニークなご当地サイダーを開発している木村飲料。 その商品クオリティーの高さをご紹介いたします。 大手飲料メーカーとまともに戦っても圧倒的資本力で市場を奪われる。 ならば自分たち独自の市場を作ればよい。 そんな発想で独自の商品開発をしている木村飲料。 中小企業だからこそ出来る商品戦略と話題作りには学ぶものが多いのではと考えます。 で、静岡県まで行ってその商品を買ってきました。 それでは営業マンの反対を押し切ってまで社長が開発した商品とはどれほどのポテンシャルがあるのか実際に飲んでみました。 せっかく集中してお弁当食べてたのに、いきなり呼び出されて、なんですかこれ？ うなぎ
ビジネス 2015.09.18 大阪人よ胸を張れ！大阪には偉大な起業家が沢山いるのだ！!「大阪企業家ミュージアム」に行ってきた!!! 淀屋橋や心斎橋は、今や都心の主要交通道路や観光スポットとして有名ですが、実はこの橋を建造したのは国や行政ではなく、民間の商人なんです。 ここ大阪は古来より、民間の財力で街を開拓していく文化があったのです。 具体的な例で言えば、淀屋橋は淀屋が建造、心斎橋は 岡田心斎がかけた橋などがありますね。 今回は「大阪企業家ミュージアム」で、こういった民間の企業家達の歴史を学んできました。 「大阪企業家ミュージアム」はこんなところ http://www.kigyoka.jp/ 堺筋本町駅から徒歩5分ほどの場所にある「大阪企業家ミュージアム」。 川に沿って北へ歩けばすぐに分かります。入館料は300円です。 ガイドブックや企業家名言集も売っています。各500円でした。 内容の
境界線が曖昧な動物の切り抜きって大変ですよね。 ふわふわもこもこの毛並みの背景色がなかなか取れない。 背景色が出ないように思い切って毛並みを切っちゃうと境界線がはっきりし過ぎてふわふわもこもこ感がなくなっちゃった。 みたいな事ありますよね。 そんなふわふわもこもこの動物を簡単にそれなりに上手く切り抜く方法をご紹介します。 まずはクイック選択で大まかな選択範囲を作る 今回はこのウサギの画像を切り抜きたいと思います。 「ツール」から「クイック選択」を選びます。ショートカットキー［W］ このように大まかな選択範囲を作成します。 細かい部分は後で調整が可能ですのであまり神経質ならなくてもいいですよ。 境界線を調整する 「選択範囲」から「境界線を調整」を選びます。ショートカットキー［Alt］+［Ctrl］+［R］ このようなダイヤログが表示されますよね。 「表示モード」を「オーバーレイ」にします。
WEBサイト制作 2015.11.24 WEBデザイナーを育ててきた私が駆け出しWEBデザイナーに言いたい事。考え込むよりも手を動かさなきゃ。 I.M.Dでは積極的にWEBデザイナーを育てる取り組みを行っております。 今は直接指導をする立場ではなくなりましたが、私も10年前はデザイナーの育成に尽力をしておりました。 その時を振り返って思う事があったので紹介したいと思います。 デザインプロセスがないとデザインを教えるのはすごく大変なんです 後輩が作ったデザインにアドバイスをする際、「プロセスを見せて」って尋ねるんですが、そのプロセスがないって事がしばしばあります。 「えっTOP.psdしかないの」 「ここまで作るのに葛藤とか、迷いとかあるでしょ。その際に出来たTOP案AとかTOP案BとかはたまたTOP案B-1とかないの？」 「じゃいかにしてこのデザインにたどり着いたか分からないじゃないか」っ
「最近のITやwebのトレンドや流行は何だと思う？」 AIやブロックチェーン、フィンテック、VRやIOT、SXOなどなど・・・ 上げればキリがないほどですが、自分があまり興味がない分野のトレンドってよく分からなかったりしますよね。 昔はいろんな商品やサービスが社会現象や流行といった形で盛り上がっていたので、まぁ興味が無くても知ってる。 「最近〇〇が来てるらしいねぇ」など、何となく知り得たのですが・・・ 最近情報が偏っているなぁと感じることも多いので自分なりに実践しているトレンドを追う方法を紹介します。 そもそもなぜトレンドが見えにくいのか 世の中、いろんなものが流行っています。 具体的には「Pokemon GO」でしょうか。これはやった人もそうでない人も「あぁ、流行ってたね」と納得するはず。 後は「恋ダンス」や「PPAP」はテレビで見ない日はないくらい人気でした。 では、ネット社会で起こっ
ITトレンド 2017.03.17 統計を紐解くとこんなに面白い！「生活定点」はマーケティングの参考になる？ 博報堂が公開している生活者観測データを扱うサイト「生活定点」をご存知ですか？ このサイトでは、博報堂生活総合研究所が隔年で独自に行った定点観測調査の結果を公開していますが、その内容が非常に興味深い！ 物事の意外な関係性を探る参考になるので、マーケティングに使えるサイトなのかも。 使い方は簡単で、誰でも興味のあるデータを閲覧できますよ。 いろんなジャンルの統計データがフレンドリーなデザインで掲載されている http://seikatsusoken.jp/teiten/search/ 通常統計データを扱うサイトは堅苦しいイメージが強く、使いにくい気がしますよね。 しかし「生活定点」はパッと見てもそうした難しい感じがしない作りになっています。 フォントや色味が温かい印象を持たせ、わかりや
ITトレンド 2017.04.09 iPhoneのメッセージを一括削除したり、不要なキャッシュファイルを一括削除していくれる無料ソフトを紹介。 ズボラな私のiPhoneには数百件のスパムメッセージが溜まったまま。 また、気付けば数十ものSafariウィンドウが開いたままだったり。 さぞかし不要なキャッシュファイルも溜まっていることでしょう。 そして今更ながらメッセージに溜まりに溜まったスパムを一括削除してスッキリしたい。 そこで、今回はiPhoneを最適化してくれる無料ソフトをご紹介。 個人情報の削除なども出来てしまうソフトなので不用意に何でもかんでも削除ってしてしまわないよう注意が必要です。 まずはPCソフトをイントールするところから PhoneClean https://www.imobie.jp/phoneclean/ 上記サイトからPhonecleanというソフトをダウンロードしま
WEBサイト制作 2017.04.13 Photoshopで写真をレトロ調に加工する方法を紹介！レトロな写真っておしゃれだよね！ SNSでよく見かけるレトロ加工。 なんてことない普通に撮った写真でも少しレトロ加工を加えてあげるだけで、オシャレになりますよね。 インターネットではよくアクションファイルが配布されており、私も使用したことがあるのですが、 思った通りに動かなかったり、何か変な感じになってしまうことが多かったりします。 なので結局は調整がきく自分自身で加工するのがいいかなぁと思います。 ということで今回はバリエーションが増えたら嬉しい！5パターンのレトロ加工をご紹介します。 加工パターン①：ノスタルジックな風合いの写真 まずはこちらの加工から。 レトロはレトロでもなんだかちょっと寂しげな感じになってますね！ 秋冬の画像に合いそう。それではいってみましょう！ 元画像はこちらです。 ①
良いコンテンツを作ってもなかなか被リンクが増えない。 コンテンツが百花繚乱な今、そんな悩みを抱えている方もいることでしょう。 運なのか、タイミングなのか・・・ いやいやそれはPR力が足らないからかも・・・ なのでじゃんじゃんネットに情報を流して被リンクを集める構造を自ら作るべきなのでは。 そんな思いで私が被リンク構造を意識しながらしていることをまとめてみました。 近視眼的な被リンクに囚われてはいけない。 上記は単純な被リンクの構造を描いた図です。 あなたが運用するWEBサイトがポピュラーであるか否かはこれほど単純な被リンク構造で判断をされているわけではないのです。 だからいくら被リンクを増やしても近視眼的な被リンクばかりに囚われていてはSEO効果はさほど感じないはず。 ましてや不自然な被リンクとして不正に検索順位を上げようとする行為、ブラックハットSEOとしてGoogleからペナルティを受
新たなシステムを導入したけど、ぜんぜん活用されない。 また、ホームページを新たにリニューアルしたけど運用してみるとリニューアルの目的がそれほど満たされた感じがしない。 このような不満の多くは始めの要件定義が曖昧で失敗してるケースが多いです。 要件定義は発注側と開発側が同じ目的に沿って、プロジェクトを進める言わば羅針盤。 そろぞれ関係スタッフが同じ地図を持っていても向かう羅針盤の方角が少しでも違っていれば、開発時の判断に間違ったジャッジを行ってしまう可能性は否めません。 そこで今回は要件定義を作る際の考えかたを紹介したいと思います。 まずはじめに経営レベルで要件を整理してみましょう。 【経営レベル】 経営戦略としてどのような課題を解決したいのか？ ■営業対応のスピード向上。 ■顧客単価の拡大。 ■顧客数の拡大。 ■営業活動の効率化。 ■販売機会ロスを無くす。 などなど 【業務レベル】 経営レ
チャレンジ 2015.11.06 マッチに新たな価値を。神戸のマッチ専門店「マッチ棒」でイケてるデザインマッチを買ってきた 「火の用心、マッチ1本火事の元」ってよく言ったものですが、今はその役割が使い捨てライターにとって代わり、冬の風物詩であった夜回りの掛け声「「火の用心、マッチ1本火事の元」って時代にそぐわない言葉となりました。 そんな需要が減少していますマッチですが、その昔、日本はマッチ3大生産国としてアメリカ、スウェーデンと肩を並べ、生産量の80％が神戸港から海外に輸出されたといいます。 そして今でも地場産業として姫路市には15社ほどの製造会社があり、国内マッチの90％をこの姫路市で生産されています。 20世紀、手軽な広告、ノベルティとして大活躍だったマッチ。 21世紀にその価値をどのように転換していくのだろうか。 今回はそんな疑問から新たなマッチの価値を模索する企業を紹介。 マッチ
WEBサイト制作 2016.07.20 【illustrator】入稿データの作成方法と注意点 「これをしておけば大丈夫！」 印刷物の入稿は、データを作ってそのまま入稿というわけにはいきません。 トリムマークを付けたり、画像のサイズを合わせたり。印刷会社によって入稿仕様が様々なので、なかなか面倒なことが多いです。 そのため、あまりチェックせずに作ったデータを入稿し、印刷された実物が思っていた仕上がりと全然違う！みたいなことって意外とあります。 そこで今回は、Illustratorでの一般的な入稿データ作成方法と注意点をご紹介いたします。 1.入稿データを作成するときの初期設定 ■IllustratorのドキュメントのカラーモードがCMYKになっているか確認 基本的なことですが、これがRGBになっていると印刷時大変な色ずれが起こることになります。 後々の入稿データ作成作業にも影響がでてきます
WEBサイト制作 2018.04.09 これまでとは違う！攻めの行政サイトでイケている地方自治体サイトまとめ 地方自治体のサイトっていろんな役割があるため、そのトップページは情報を盛りだくさん掲載しがちでありました。 そしてどの地方自治体のWEBサイトを見ても、ほとんど個性がなく、同じようなレイアウト、同じようなメニューボタン、同じような仕組みばかりでした。 しかし、地方創生など地方の魅力が問われる社会が定着してきた昨今。 個性をPRする地方自治体の攻めのWEBサイトの活用事例が目立つようになってきましたので、少し紹介したいと思います。 京丹後市 https://www.city.kyotango.lg.jp/ リキッドデザインで京丹後市の景観を全面にPRした行政サイト。 ナビゲーションボタンもすっきりとまとめられていて好印象です。 その分クリック回数が増えますが、無駄な情報が目に入ってこ
WEBサイト制作 2017.04.09 無料で使えるネット予約システムを５つ紹介。社内会議室のオンライン予約サイトを作ってみよう。 会社の中で会議室や物品の予約をする際にいちいち全員に連絡を入れるのは面倒くさいですよね。 今回は無料で使える会議室予約サービスを紹介します。 RESERVA https://reserva.be/ 無料料金範囲：月間予約件数100件まで、詳細データ保持期限12ヶ月 有料機能の特徴：LINE＠連携、顧客データ一括出力など（月額10000円プラン） 特徴としては外国語にも対応しており、英語、中国語（簡体）、韓国語での予約なども可能です。 月額プランは無料を含め5種類用意されていますが、10000円のプランにすると月間予約件数1000件、詳細データ保持期限24ヶ月になり、LINE＠連携や顧客データ一括出力などの便利機能が使えるようになります。 Coubic http
ITトレンド 2016.09.23 スケジュール管理に便利なカレンダーアプリはどれだ！5つのカレンダーアプリを比較。 スマホを手帳のように使うならカレンダーアプリは必須ですよね。 ということでいろいろ探して紹介するのですが、今回はAndroidとiOS両対応しているものだけに絞りました。 ですので、どちらのスマホをお使いの場合でも参考になると思いますよ。 超定番のgoogleカレンダーアプリじゃ足りないのか Android：https://play.google.com/store/apps/details?id=com.google.android.calendar ios：https://itunes.apple.com/jp/app/googlekarenda/id909319292?mt=8 PCでも利用している人が多いgoogleカレンダー。 Androidだとデフォルトで入って
WEBサイト制作 2016.02.20 知識がなくても簡単にレスポンシブWEBサイトが作れる無料のwebflowを試して見た 誰でも簡単にプロ並みのWEBサイトの作成が出来るとの事で気になっていたwebfloeを試して見ました。 単なるレイアウトアプリと思いきや意外にも奥が深くてこりゃすげぇって思う反面。 全くの素人では使いづらいのではと思うので細かく作業フローを解説します。 まずは無料のアカウントを作成します。 まずは下記、webflowのサイトにアクセスして下さい。 https://webflow.com/ sign upで新規アカウントを作成いたします。 名前、メールアドレス、パスワードを登録します。 ログインをすると上記の質問が表示されます とりあえず、「私はwebデザイナー/開発者ではないです。私はWEBサイトが必要です。」にチェックを付けておきます。 テンプレートを選んでサイト
どうもです。 先日iPhone6sからiPhone8 Plusへと機種変した希少な人間です。 そもそもiPhoneXの発売を待つつもりもなく、iPhoneでポートレート写真を撮ることが目的の私は早々にiPhone8 Plusに乗り換え。 果たしてiPhone8 Plusを持っている人って何人ぐらいいるのでしょうね。 かなりレアなiPhone端末になりそうな気がします。 まぁそんな話はさておいて今回はiPhone写真の新フォーマットHEICをPhotoshopで加工するためにJPEGフォーマットに変換する便利ソフトの紹介です。 HEICって？ 拡張子のHEICって何？ それはiPhoneで新しく採用された画像データ・フォーマットの拡張子です。 iPhoneのカメラの性能が上がれば当然JPEGの容量も上がります。 カメラの性能が上がる度にデータサイズはどんどん増えていきデータ転送スピードが重く
WEBマーケティング 2017.08.19 Pinterest（ピンタレスト）からサイトへ集客。コンテンツマーケティングにピッタリのSNS Pinterestが日本でサービスを始めたのが2013年。 もう随分と前の事ですが、何をいまさらPinterestなんだって話です。 私自身、積極的に投稿しているSNSってFacebookとTwitterとInstagram。 Pinterestはたまに眺めてピンをする程度で積極的な投稿はしていませんでした。 まぁそれがちょっとPinterestに対して意識が変わった訳なんです。 というのも、自社サイトのアクセス解析でソーシャル流入率を見てみたところ、意外な事実を発見したのでちょっと報告したいと思います。 自社サイトのソーシャル流入先を調べてみたら IMDのサイトは8割以上が検索流入。 ソーシャル流入はまだまだ割合が低い。 で、Google Analy
次のページ
このページを最初にブックマークしてみませんか？
『ホームページ制作 大阪 インフォメーションメディアデザイン株式会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
