「みやだい」の日記

みやだい日記 * タグ[サイト製作]の日記一覧

10件中 15件目の記事

■投稿日時:2013/12/05(木) 21:54  ■カテゴリ:WEB SITE CREATE

当サイトのiPhone/Android版mdai.jp Mobileができました!

mdai.jp Mobileはこちら

最近毎日少しずつ構築してきてようやく形になりました(T_T)基本的にPCサイトとほぼ同じようなページ構成で、日記、音楽、写真、工房、家猫の各コンテンツを同じように見ることができます。一部機能を省略していたり、表示が完全に最適化されていない部分もありますが、今後も徐々に機能強化・最適化していきます(^^)

↓モバイルサイトのイメージ
mdai.jpのモバイルサイトmdai.jpのモバイルサイト
mdai.jpのモバイルサイトmdai.jpのモバイルサイト
mdai.jpのモバイルサイトmdai.jpのモバイルサイト
jQueryMobileは記述が本当に簡潔で分かりやすくて書きやすい。簡単にスマホらしいインタフェースのページが作れます。PC版サイトのレイアウトやcss記述等はさんざんいじりまくって複雑に絡み合ってますが、モバイル版はシンプルかつ合理的な構造にまとめることができました。面白いのはPC版とモバイル版はサーバ側を完全に共通のアクションとしたこと。表面を付け替えてるだけで同じ機能を持つ兄弟ページという感じで、動的処理も既にPC版ページで動いているのでさくさく進められました。今後もサイト全体で様々な試行錯誤を続けていきます!



タグ:サイト製作コメント(0)

■投稿日時:2013/12/03(火) 22:25  ■カテゴリ:WEB SITE CREATE

ここ3ヶ月ぐらいで実施したサイト調整について:

・写真詳細ページ下部にマップを埋め込んだ
今までは地図は別ページとして開く位置づけだったが、アクセス解析をを見ると地図ページはほとんど見られていなかった。詳細ページに地図が加わることでページの内容がより多様な印象になった。

・全体的に余計な要素を除去してレスポンスを軽くした
翻訳、一部のSNSシェアボタン等が重かったので除去。他者サーバのレスポンスに依存して損していた。詰め込みは禁物と反省。

・日記にタグ項目の概念を追加
日記の概要が把握しやすくなり、関連する日記一覧に飛びやすくなった。

・日記コメントにスパム対策
スパム投稿が増えたので認証コードの簡易版的なものを追加。

・フォントをメイリオに変えた(表示は環境による)
ドットで硬かったフォントが滑らかになって印象UP。行間が伸びたのでデザインの全体調整をした。

撮影場所の地図のマーカー(場所を表すピン)が増えてきたので、グループ化して色分けした。
紅葉はオレンジ、桜はピンク、自然は緑、展望系は水色、その他(主に都市風景)は青。カラフルになった。
撮影場所の地図撮影場所の地図
・写真コンテンツ以外の写真もajaxを利用した表示(highslide)を適用
画像URLを直接開いていたのをライトボックスみたいな表示に切り替え。

・オススメやHOTネタを明示する等、ページ内構成を工夫。
形式的な表示だけでなく、訪問者がそのページに何を求めているかを考えて対応する事が重要と思った。

・サイト内全体の文章を改善
より意味のある文章に改善。

・写真TOPにサンプル写真を設置
サンプルがあるとコンテンツの見せ方のイメージがつかみやすくなると思ったため。

・写真TOPページに「旅行別に探す」を追加
多様な角度から見ることが重要と思った。こんなにたくさん行っていたなんて自分でも驚いた。

・自分の差別化要素を意識的に強調、内部リンク張り
特にコントラファゴット、ファゴッティーノ。検索エンジンにかなり強い状態。

・日記を頻繁に書くことを意識して実施中
googleに評価されやすい「オリジナルコンテンツ」を柔軟に生み出せる場所である。

サイト運営に重要な事を学んだりしつつ、結構細かい調整をちょくちょくやっています。1つ1つは大きくないのですが、全体が少しずつより良い方向に進んでいると思います。本来は一番最初にしっかり設計すべきなのですが、なにせ趣味で作っている試行サイトなもので(^^;)

そして今、とあるものを一気に頑張って構築しています。最近ずっとこれに着手していて、8割ぐらい形になっていてあと一息。今のサイト全体を見直すきっかけにもなりすごく有意義です。年内には公開できる予定ですのでお楽しみに!

データベースの設計と実装による機能拡張、必要に応じてのサーバ側動作調整、ある程度のデザイン調整(HTMLやCSS調整。写真も自前調達・笑)ができるので、色々とフレキシブルにサイト調整ができています。最近はマーケティング関係も勉強しているので、それを活用して心理的にも魅力的なサイトにしていきたいです。

P.S.
アイソン彗星は大分部が蒸発してしまったとのことですが、そろそろ本来見られる日付けになる(高度が地平線より上がってくる)のでどのぐらい見られるか早起きできたら(笑)見てみようと思います。

P.S.
流行語対象が発表されました。「今でしょ!」「お・も・て・な・し」「じぇじぇじぇ」「倍返し」、いずれもランクインするとは思ってましたが、4つ共年間大賞になるなんて予想外でした(^^;)

P.S.
「湾岸署」に行ってきました!
「踊る大捜査線」の湾岸署のビルのロケ地「踊る大捜査線」の湾岸署のビルのロケ地他にも色々な場所で写真撮りましたが全然追いつかない(^^;)



タグ:サイト製作コメント(0)

■投稿日時:2012/06/10(日) 00:24  ■カテゴリ:WEB SITE CREATE

最近日々少しずつ試行錯誤しつつ各種サイト改善を行っています。主に2種類の視点の改善で、1つ目はサイト印象改善。デザイン面に関しては素人なので、変更したり戻した色々と試行錯誤しています。専門的にはちゃんと体系的な捉え方があるのでしょうが。意識したのは、ぱっと見で不自然と直感したことを改善すること。

改善した事:
・サイドメニューのメニュー項目間の縦幅を縮めること
・全ページにサイドにコンテンツ分類(写真、音楽などの粒度)の説明をつけたこと
・サイド緑色の枠はコンテンツ分類の説明でのみ使用すること(それ以外がオレンジ色に変更)
・領域が開放的すぎるので破線枠で囲う箇所を追加
・h2のバーのデザインを改善、
・文章の中で強調したい文字に色をつけたり太字にしたり強調、区別
・各カテゴリTOPページにも、サイトTOP同様のワイド画像を追加

これらによって、随分ページにメリハリがついたり、空白バランスの調整・色使いの統一によって、感覚的で何とも表現できませんが、バランスがとれて見やすくなったと思います。

もう1つの視点は、新しい時代のサイトらしい要素をつぎ込むこと。

・facebookシェア、イイネボタン、mixiチェック、google+ボタンなどSNSシェアボタンを追加
・TOPページ、カテゴリTOPページ画像をじわじわと表示(jQUeryを使用)
・一部の画像を「ローディグ」表示で動きを出す(jQuery)
・翻訳ボタンを設置(jsコードのみで設置はとても簡単)
・TOPページ等一部のページのサイドに、twitterの最新ツイートを表示

これらにより近年インターネット利用の中心に移行しつつあるSNS系に共有・連携しやすくなったほか、完全に静止したページ印象だったことが改善されたり、単調すぎたページに賑やかさが付加されたと思います。今までで比較的大きな効果のある改修だったと思います。

直感に頼る部分が多かったりまだまだ試行錯誤の連続ですが、良いサイトを目指して頑張っていきます!

P.S.
スマートフォン用サイトも作成中です。



タグ:サイト製作コメント(0)

■投稿日時:2012/03/03(土) 21:32  ■カテゴリ:WEB SITE CREATE

最近このサイトの様々な更新を集中的に行っています。特に見栄え・分かりやすさ・統一感というデザイン関係の微調整を少しずつ進めています。
具体的には、

・全体的に、枠(Sectionと呼んでいる)のborderを除去
→シンプルになり、清潔ですっきりした印象になった。

・サイト全体的に詳細ページ(末端ページ)にサイドメニューを追加
→ページがさびしい感じだったのがにぎやかになった。またページの行き止まり感が改善。

・各コンテンツの左上の画像を正方形で統一した
→従来サイズがばらばらの正方形でしたが、正方形に統一したところ存在が安定した印象になった。

・画像サムネイルのサイズを「長辺192px」に統一
従来width=192pxや200px等と、横幅だけの指定でしたが、縦長の画像の場合は縦が長くて面積が大きい印象になっていました。これを全体的に長辺統一というルールを決めて改善し、縦長・横長共に印象のばらつきがなくなった。

・写真エリアページ(横浜、京都等のレベル)を改善
各ページの解説を指定文字数まで表示したり、撮影情報の表を表示したりして、1つ1つの印象に重みを付けた。

・写真詳細ページ(豊洲、増上寺等のレベル)を改善
解説の横に撮影情報の表の表示を追加。
→文章だけで単調だったのが、レイアウト印象に多彩さが加わった。

・写真コンテンツは関連ページへのレコメンドを表示
サイドバーの「○○に関連する写真コンテンツ」の実装。
写真データDBから判断して動的に出力するようにサーバ側で実装。
→詳細ページでの行き止まり感を減らす効果がある。

・文章、画像の調整
ページの印象として文章・画像が過剰・不足と思う部分に関して調整。

・ページ印象の改善
印象が近い画像を減らし、視覚的多様性を増す

・リンクを増やす
文章やページに他ページと関連する記述がある場合は意識的にリンクするようにしています。


色々試行錯誤した結果ですがこのようになりました。他にもあったかもしれませんが、たくさんの修正をしたのでもう自分では見えなくなっています(^^;)

そもそも自分はサーバ側実装のエンジニアでデザイナではないため、デザイン面に関しては素人なので苦労しています。デザインはほんの少し変えるだけ随分印象が変わると実感。これらのデザイン改善・統一は、サーバ側の改善と併せてテンプレ構造をなるべく共通化する構造改善を事前に行ったことで実現しました。(ページ数がとても多いのでこれがすごく大変でした…)

最初からちゃんと構造設計をしていればこの苦しい作業も不要だったのですが(^^;)でも合理的な構造になってみて、デザインも機能も手も加えやすくなり管理しやすくもなっています。まだまだデザイン的な改善を模索しつつ、どんどん規模が大きいサイトにしていくので、サーバ側とバランスをとり管理しやすい構造にしていきます。

このサイトを作っていて学ぶことは本当にたくさんあると実感していて、やりたいこと、できそうなことがまだまだたくさんあり、とても楽しみになっています。



タグ:サイト製作コメント(0)

■投稿日時:2011/08/13(土) 22:11  ■カテゴリ:WEB SITE CREATE

■デザイン改善

ウェブサイト内の以下デザイン改善をしました。

・見出しデザインを変更
・画像の周囲にフレームをつけた

大きい修正ではないですが、やっぱり印象が変わりますね。
見出しは以前は左右方向のグラデーションでしたが、左メニューのある幅狭ページと、
左メニューのない幅広ページとで印象が異なり、微妙な感じがしていました。
今回幅100%指定で幅全体に明確なラインがある感じになり、見やすくなりました。
ページ内の境界が明確に、シャープになったというか。
今度はページタイトルが気になる・・・

デザインセンスはないので、色々さぐりながら印象良いサイトを目指していきます!
それにしても、サイト全体のデザインを簡単に切り替えられるcssは便利ですね~。

■ドメイン追加取得

ドメインを2つ取りました。
・k-fg.jp
・fgno.jp
ドメイン名からして、何を作ろうとしているか分かる人もいるかもしれませんが、
ある意味ニッチなサイトを作ろうかと企み中ですw
それにしても、fagott関係のドメインって結構余っているもんですね~。



タグ:サイト製作コメント(0)